Softonic

スクリーンショットモックアップ生成ツール

ステップ 1 / 3

生のスクリーンショットは実用的ですが、そっけない印象になりがちです。ブラウザのバーや macOS のウィンドウ枠に収め、柔らかな影と色鮮やかな背景を添えると、同じスクリーンショットが完成度の高い製品ビジュアルに見えます。このツールは、すでにお持ちの画像をブラウザウィンドウ、macOS ウィンドウ、または角を丸めただけのシンプルな枠に収め、グラデーション背景の上に配置し、余白・角丸半径・影を調整できます。仕上がりはスライド、SNS投稿、プレスキットにそのまま使えます。

スクリーンショットのモックアップを作る手順

  1. 1

    スクリーンショットをアップロード

    任意の解像度で撮影した、30 MB までの PNG・JPG・WebP ファイル。Retina と標準の両方の画像に対応します。

  2. 2

    枠を選ぶ

    ブラウザウィンドウ（信号機のような3色の丸とアドレスバー付き）、macOS ウィンドウ（信号機のような3色の丸付き）、または角を丸めただけのシンプルな枠。

  3. 3

    背景を整える

    暖色のグラデーションへとなじむ背景色を選びます。余白を加え、角丸半径を調整し、影のオン・オフを切り替えます。

  4. 4

    書き出し

    完成したモックアップを PNG としてダウンロードし、SNS投稿・スライド・プレスキットに使えます。

適切な枠と背景を選ぶ

枠の選択は文脈を伝えます。ブラウザのバーは「Webアプリ」を、macOS ウィンドウは「デスクトップアプリ」を示します。シンプルな枠は、すでに独自の外枠を持つUIに視線を集めます。見せたい内容に合った枠を選びましょう。

枠ガイド

枠 最適な用途
ブラウザウィンドウ SaaS機能、ランディングページ、ダッシュボード
macOS ウィンドウ デスクトップアプリ、エディタ、ターミナルのキャプチャ
シンプル すでに独自の外枠を持つスクリーンショット

推奨される目安サイズ

このツールはスクリーンショット自体の解像度で書き出します。特定のチャンネル向けに結果を切り抜いたりサイズ変更したりする際は、以下の寸法が役立つ目安になります。

用途 寸法（px）
Twitter / X カード 1600 x 900
LinkedIn 単一画像 1200 x 627
Instagram フィード（横向き） 1080 x 566
Product Hunt ギャラリー 1270 x 760
スライド（16:9） 1920 x 1080

スタイルのヒント

  • 影は控えめに保つ。 影は枠を背景から浮かび上がらせます。奥行きが欲しいときはオンに、フラットでミニマルな見た目にしたいときはオフにします。
  • 余白はたっぷりと。 枠の周囲に60〜120pxの余白があると、スクリーンショットが窮屈に見えません。
  • ブランドに合う背景を選ぶ。 選んだ色は暖色のグラデーションへとなじむため、ブランドに近い色合いが素材とサイトを結びつけます。
  • 枠と内容を合わせる。 デスクトップアプリをブラウザのバーで囲んだり、Webページを macOS ウィンドウで囲んだりすると、ちぐはぐに見えます。迷ったらシンプルな枠を使いましょう。
  • 書き出す前に機密データを隠す（ユーザーのメールアドレス、実名、請求情報）。ぼかす方が、法的トラブルより簡単です。

よくある質問

3種類です。ブラウザウィンドウ（信号機のような3色の丸とアドレスバー）、macOS ウィンドウ（信号機のような3色の丸、アドレスバーなし）、そしてスクリーンショットの角を丸めるだけのシンプルな枠。これらの枠はスタイライズされたデザインで、特定製品のピクセル単位の再現ではないため、ほとんどの地域でマーケティング利用に安全です。

現時点では使えません。モックアップは、選んだ背景色から作られるグラデーションの上に合成され、PNG はその背景を焼き込んだ状態で書き出されます。ブランドに近い色を選ぶか、無地の面に置く予定なら中間的な色を選んでください。

モックアップは扱いやすい作業幅でレンダリングされるため、非常に大きなスクリーンショットは枠に収まるよう縮小されます。最も鮮明な結果を得るには Retina（2倍）で撮影してください。書き出した PNG は高精細ディスプレイでも鮮明さを保ちます。

いいえ。合成はブラウザのキャンバス内で行われ、画像が端末を離れるのは最終的な PNG を保存したときだけです。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

ビジョンボードメーカー

目標をひとつのボードに視覚化：画像をアップロードし、オリジナルのタイトルとキャプションを添え、色とレイアウトを選べば、印刷用のPNGとしてダウンロードできます。入力した内容はすべてブラウザの中だけにとどまります。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

このツールは他の言語でも利用できます