デバイスモックアップ

スクリーンショットをスマホ・PC・ブラウザ枠に入れて背景付きで仕上げます

スクリーンショットをここにドロップ、またはクリックして選択

最大 3 枚まで横に並べられます · Ctrl+V で貼り付け

デバイスモックアップの使い方

スクリーンショットを iPhone・Android・タブレット・ノート PC・モニター・ブラウザ・macOS の枠に収め、グラデーションや画像の背景を付けます。最大 3 枚を横に並べられ、描画はブラウザ内で行います。

スクリーンショットを最大 3 枚までドロップするか、クリックして選択します。Ctrl+V で貼り付けることもできます。

「デバイス」で枠を選び、「本体カラー」や「向き」を設定します。ブラウザと macOS では「テーマ」、タイトル、「アドレスバー」も変更できます。

「スクリーンショット」で「収め方」を全体・全面・スクロールから選びます。縦長の画像は「スクロール位置」で表示する部分を決めます。

「背景」をなし・単色・グラデーション・画像から選び、「レイアウト」で余白、「影」、回転、3D 傾き、「キャンバス比率」を調整します。

「書き出し」で「解像度」を 1×・2×・3× から、形式を PNG・JPG・WebP から選び、「画像をダウンロード」または隣のコピーボタンをクリックします。

よくある質問

いいえ。ブラウザ内のキャンバスに描画されるだけで、端末の外には出ません。

JPG、PNG、WebP、AVIF、GIF、BMP、HEIC のスクリーンショットを読み込めます。仕上がりは PNG、JPG、WebP で書き出します。

「背景」を「なし」にして PNG か WebP で書き出します。JPG は透過に対応していないため、回転や 3D 傾きで生じる角の部分も含めて透明な部分は白になります。

「収め方」で「スクロール」（ブラウザ・macOS・カードの枠では「16:10 で切り抜き」）を選び、「スクロール位置」を見せたい部分に合わせます。

ブラウザにはキャンバスサイズの上限があります。2× や 3× で上限を超える場合は自動で倍率を下げ、「書き出し」欄にその旨を表示します。