スクリーンショットモック無料・登録不要
スクリーンショットにブラウザやスマホのフレームを追加。プレゼン資料やポートフォリオの見栄えが格段に向上します。
ここに画像をドラッグ&ドロップ
またはクリックしてファイルを選択（最大10MB）
PNG, JPG, WebP, GIF, SVG
良いスクリーンショットモックの判断基準
サービス画面のスクリーンショットをLP・SNS・プレゼン資料に載せるとき、デバイスフレームに合成して見栄えを整えられます。合成結果は、下の基準で「きれいに見えるか・誤解を生まないか」を確認してから使います。
元のスクリーンショットは高解像度か
フレームに合成すると元画像が拡大されるため、低解像度のキャプチャは粗く見えます。できるだけ高解像度で撮ったものを使います。
画面の中身は外に見せてよい状態か
仮データ・個人情報・社外秘の情報・未完成の要素が映り込んでいないかを、合成前に確認します。一度公開した画像は回収できません。
デバイスの選択は実際の利用シーンと合っているか
利用者がスマートフォン中心のサービスをPCフレームで見せると違和感が出ます。実際の利用デバイスに合わせてフレームを選びます。
本物の画面と誤認させる使い方になっていないか
実際の画面と異なる内容に加工したモックを「実際の動作画面」として見せるのは誤認のもとです。イメージである場合はその旨が伝わる見せ方にします。
掲載先のサイズ・縦横比に合っているか
LPの掲載枠やSNSの表示枠に対して、合成画像の縦横比が合っているかを確認します。掲載先で勝手にトリミングされ、フレームが切れることがあります。
縮小表示でも内容が伝わるか
資料やSNSでは画像が小さく表示されることがあります。縮小した状態で、どの画面なのか・何を見せたいのかが伝わるかを確認します。
ありがちな失敗例（NG → 改善）
NG低解像度のスクリーンショットをそのまま合成して、画面部分が粗くなる。
改善高解像度でキャプチャを撮り直してから合成する。
→ フレーム合成時に元画像が拡大されるため、元の解像度不足はそのまま粗さとして目立ちます。
NG仮データや開発中の表示が残った画面をそのまま使う。
改善見せられる状態にデータと表示を整えてからキャプチャする。
→ 未完成の要素や仮データが映っていると資料全体の信頼感が下がり、誤った情報を見せることにもなります。
NG実際には存在しない画面に加工したモックを、本物の動作画面として紹介する。
改善実際の画面を使うか、イメージ画像である旨が伝わる形で掲載する。
→ 実在のUIに見える分、見た人が本物と誤認しやすく、後で発覚すると信頼を大きく損ないます。
スクリーンショットモックの使い方
- 1モックアップに使用するスクリーンショットをアップロードします
- 2デバイスフレーム（スマホ・PC等）を選択します
- 3生成されたモックアップ画像をダウンロードします
スクリーンショットモックの例文・サンプル
スクリーンショットモックの例
スクショ: Webサイトのキャプチャ（1920x1080）
生成画像: iPhone 15のデバイスフレーム付きモックアップ
※ iPhone 15 / iPad / MacBook / Android の4種のデバイスフレームに対応
よくある質問
スクリーンショットモックは無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
📘 関連ガイド記事
関連ツール
スクリーンショットモックについて
画面キャプチャにデバイス枠をはめる自動合成
Webサイトやアプリの画面キャプチャをそのままLP・SNSに貼ると素朴な印象になりがちです。デバイスフレーム（iPhone、iPad、MacBook、Android）に画面を埋め込むと、プロフェッショナルな印象になり、クリック率も上がるとされています。Photoshop でデバイス素材を合成するのは手間ですが、本ツールはアップロードした画像を選んだデバイスフレームに自動合成し、SNSや LP にすぐ使える形でダウンロードできます。処理はブラウザ内で完結し、アップロードした画像をサーバーへ送りません。会員登録もログインも不要で、商用利用も可能です。
同じ画像を2つのフレームに入れて出力したサイズ
どんな画像が返るのか、実際に画像を各フレームに合成して出力サイズを記録しました。以下はいずれもツールが実際に書き出した結果です。
【1. PC画面（1200×630）を MacBook フレームに】 横1200×縦630のPC画面のキャプチャを MacBook フレームに入れると、書き出された画像は 720×560 ピクセル、56.0 KB の PNG でした。元が横長でも、フレームの形に合わせて縮小されます。
【2. 同じ画像を iPhone 15 フレームに】 まったく同じ 1200×630 の画像を iPhone 15（縦長）フレームに入れると、書き出しは 510×962 ピクセル、59.8 KB の PNG になりました。フレームが縦長なので、出力も縦長の寸法に変わります。
つまり、出力の寸法は選んだデバイスフレームで決まり、元画像の縦横比では決まりません。
小さすぎる画像を入れても止めてくれない
知っておきたい弱点があります。試しに 64×64 ピクセルの小さなアイコンを MacBook フレームに入れてみたところ、書き出しは 720×560 ピクセル、51.5 KB の PNG でした。1200×630 のPC画面を入れたときと同じ 720×560 で、64×64 の画像は枠いっぱいまで引き伸ばされたことになります。
このとき、画像が小さすぎるという警告やエラーは出ませんでした。フレームの出力寸法は固定なので、小さい画像を入れると足りない分だけ拡大され、粗く見える状態のまま書き出されます。ツールは止めてくれないため、元画像が枠に対して十分な大きさかは自分で確かめる必要があります。
これは今回試した組み合わせで確認できた挙動で、すべての画像・フレームで同じとは限りません。実際に使う画像で一度書き出し、拡大されて粗くなっていないかを目で確認してください。
粗く見せないための元画像の選び方
きれいに見せるコツは、元画像をできるだけ大きく用意することです。前述のとおりフレームの出力寸法は決まっていて、元画像が小さいほど拡大され、粗く見えます。高解像度の画面キャプチャを渡すほど、仕上がりが鮮明になります。
デバイス選びも仕上がりを左右します。ターゲットユーザーがモバイル中心なのに MacBook フレームを使うと違和感が出るため、実際の利用デバイスに合わせて選んでください。また、デモ用画面に未完成の要素や仮データが映っていると、フレームに入れてもプロ感が損なわれます。合成する前に画面を整えておくと安心です。
向かないのは、ロゴやアイコンのような小さな素材を単体でフレームに入れる使い方です。引き伸ばされて粗くなるだけなので、その用途には別の見せ方を選んでください。
どんな場面で使えて、有料ツールと何が違うか
本ツールが向いているのは、アプリや SaaS の LP でサービス画面を iPhone / MacBook フレームに合成して見せる場面、SNS告知投稿で画像を目立たせたい場面、社内プレゼンや営業資料で UI モックアップを使って実装イメージを共有する場面などです。
Mockuups Studio や Smartmockups などの海外サービスは機能が強力ですが、有料プランや英語UIが障壁になることがあります。本ツールは日本語UIで、複数のデバイスフレームから選んでブラウザ内で合成でき、会員登録もログインも不要、商用利用も可能です。一方で、影の付け方や背景まで細かく作り込みたい場合は、専用の有料サービスのほうが自由度が高くなります。用途に合わせて使い分けてください。
---