デバイスモックアップ作成（スクショをスマホ・PC枠に合成）
アプリやWebサイトのスクリーンショットを、スマートフォン・タブレット・ノートPC・ブラウザウィンドウの汎用的な枠にはめ込んで、紹介用のモックアップ画像を作ります。本体の色・影・余白・背景の透明化を調整でき、PNGで保存できます。枠は特定メーカーの製品ではなく、自作の汎用デザインです。画像はブラウザ内で処理され、アップロードされません。画像に飾りの枠だけを付けたいときは 画像に枠・フレームを付ける もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
ここに画像をドラッグ＆ドロップするか、ボタンから選択してください。
スマートフォンとタブレットだけで使えます。
プレビュー
使い方
- スクリーンショットを枠内にドラッグ＆ドロップするか、ボタンから選びます。
- 「デバイス」でスマートフォン・タブレット・ノートPC・ブラウザウィンドウから選びます。
- 「画像のはめ込み」「本体の色」「背景を透明にする」などを調整し、プレビューで確認します。
- 「モックアップをPNGでダウンロード」で保存します。
注意事項
- 枠は特定メーカーの製品を再現したものではなく、本ツール独自の汎用デザインです。ノッチやカメラ位置も簡略化しています。
- 「画面いっぱいに切り抜く」は、画面の縦横比に合わせて画像の中央を切り抜きます。画面の端を残したいときは「全体を収める（余白は黒）」を選んでください。
- 「背景を透明にする」をチェックすると、PNGの背景が透明になります。資料やスライドにそのまま重ねて使えます。
- 出力サイズは「出力幅（px）」で決まります。GIFやアニメーションWebPは最初の1コマだけが対象です。読み込める画像は1辺16384px・総画素数5,000万までです。
用語解説
モックアップ
完成イメージを伝えるための見本画像です。アプリ紹介やストア掲載、資料用に、画面を実機の枠に入れて見せるときによく使われます。
ベゼル
画面のまわりにある縁の部分です。ここでは本体の色で描かれ、太さはデバイスごとに決まっています。
ノッチ・ダイナミックアイランド
スマートフォンの画面上部にあるカメラ用の切り欠きや丸い領域のことです。このツールでは角丸の黒い部品として簡略的に表します。
よくある質問
スクリーンショットをスマホの枠に入れるには、どうすればいいですか？
画像を読み込み、「デバイス」で「スマートフォン」を選ぶだけです。画面の縦横比に合わせて画像が中央で切り抜かれ、枠にはめ込まれます。「モックアップをPNGでダウンロード」で保存できます。
画像の端が切れてしまいます。全体を表示するには？
「画像のはめ込み」を「全体を収める（余白は黒）」に変えると、切り抜かずに画面内へ収まります。画面と画像の縦横比が違うときは、上下または左右に黒い余白が出ます。
背景を透明にして、スライドなどに重ねられますか？
「背景を透明にする」にチェックすると、枠の外側が透明なPNGで保存できます。影を付けた場合は、影の部分だけが半透明で残ります。
特定メーカーのスマホそっくりの枠は使えますか？
いいえ。枠は特定の製品を再現しない、このツール独自の汎用デザインです。ノッチやカメラ位置も簡略化しています。商標への配慮から、実機の外観を再現することは目指していません。
画像はサーバーにアップロードされますか？
されません。枠への合成とPNGの書き出しはすべてブラウザ内で行われ、画像が外部に送信されることはありません。
このページをシェア