デバイスモックアップ作成ツール — スクショをフレームに合成・PNG保存

デバイスモックアップ作成ツールの使い方

1. スクリーンショットをアップロード：ドラッグ＆ドロップまたは「ファイルを選択」ボタンで画像を読み込みます。PNG・JPEG・WebP 等、主要な画像形式に対応しています。
2. デバイスを選択：iPhone（ノッチ付き縦型）・iPad・MacBook・ブラウザウィンドウ（Chrome風）の4種類から合成したいフレームを選びます。
3. 背景・サイズを設定：背景を単色・グラデーション・透明から選び、スライダーでデバイスのサイズを調整します。
4. プレビューを確認し PNG でダウンロード：「プレビューを更新」でキャンバスに反映し、見た目を確認してから「PNG でダウンロード」でファイルを保存します。

こんな場面に使えます

App Store・Google Play のストアスクリーンショット作成、ポートフォリオサイトへの掲載、プレゼン資料・提案書への差し込み、SNS 投稿用の見栄えの良い画像作成など、様々な場面でご活用いただけます。すべてブラウザ内で完結するため、画像が外部サーバーに送信されることはなく、プライバシーを守りながら安心してお使いいただけます。ソフトウェアのインストールや会員登録も一切不要で、すぐに利用開始できます。

対応デバイスフレームについて

iPhone フレームはノッチ（Dynamic Island 風のデザイン）を備えた縦型スマートフォン、iPad は横長タブレット、MacBook はキーボードと画面を持つノートPC、ブラウザウィンドウは Chrome 風のタブバー付きウィンドウをそれぞれ CSS と Canvas API で描画しています。外部 SVG ファイルや画像素材は使用していないため、読み込みが高速です。