スクリーンショットをアップロードするだけで、iPhoneやMacの枠に美しくはめ込み。 プレゼン資料やポートフォリオ、SNS投稿をワンランク上の仕上がりに導きます。
画像をここにドロップ
またはファイルを選択
Advertisement
モックアップ・フレーム・インサーターとは？
本ツールは、アプリのスクリーンショットやWebサイトのデザイン画を、実際のデバイス（iPhone, Android, Mac, Tablet）の筐体フレームに合成するための専門ツールです。 複雑な画像編集ソフトを使わなくても、ブラウザ上で直感的にベゼルの太さや光沢、スケールを調整でき、プロ仕様のプレゼン素材やマーケティング用画像を即座に作成できます。
こんなシーンで便利です
ポートフォリオ制作
制作したWebサイトやUIデザインを実機にはめ込んで見せることで、実際の使用感を伝えやすくし、作品のクオリティを強調します。
プレゼン資料・企画書
プレーンなスクリーンショットをそのまま貼るよりも、デバイス枠に収めることで資料全体に「完成イメージ」としての説得力が生まれます。
SNS（X, Instagram）の宣伝投稿
背景色をブランドカラーに合わせたり透過させたりして、目を引く告知用バナーをクイックに作成。光沢調整で高級感のある演出も可能です。
アプリストア用スクリーンショット
ストア掲載用の画像にデバイスフレームを付与し、ユーザーが手元で使っている状況を想起させ、インストール率の向上を狙います。
使い方は簡単 5ステップ
- 「素材をアップロード」エリアに画像をドロップ、またはファイルを選択します。
- 「デバイス選択」から、合成したい機種（iPhone, Laptop等）を選びます。
- 「フレーム調整」スライダーで、表示サイズやベゼルの太さ、反射（光沢）を好みに調整します。
- 「背景設定」で特定の色を指定するか、透過設定を選択します。
- 「PNGで保存」ボタンを押し、完成した画像をダウンロードします。
※アップロードする画像の比率（16:9や9:19.5など）とデバイスの種類を合わせると、より自然なはめ込みが可能です。
ご利用時の注意点
- 高画質出力：書き出しは 1200px × 1200px の高解像度キャンバスで行われるため、印刷物や大型モニターでの使用にも耐えられます。
- 光沢エフェクト：筐体エッジの光沢を強めることで、モダンなハードウェア特有の「重厚感」や「高級感」を演出できます。
- 対応画像形式：JPG, PNG, WebP に対応しています。アニメーションGIFには対応していません。
Advertisement
対応デバイスフレームと推奨画像サイズ一覧
各デバイスに最適化された合成を行うための、アスペクト比と解像度の目安です。
| デバイスカテゴリー | 代表的なアスペクト比 | 主な用途・SNS |
|---|---|---|
| iPhone / スマホ | 9 : 19.5 (1170×2532〜) | App Store用、Instagramストーリー、SNS宣伝 |
| Android / スマホ | 9 : 20 (1080×2400〜) | Androidアプリ紹介、Google Playストア掲載 |
| MacBook / ノートPC | 16 : 10 (2560×1600〜) | Webサービス紹介、SaaSデモ、ポートフォリオ |
| Windows PC / モニター | 16 : 9 (1920×1080〜) | YouTubeサムネイル、プレゼン資料、ブログ記事 |
| iPad / タブレット | 3 : 4 (2048×2732〜) | 電子書籍、教育用アプリ、デジタルカタログ |
| Apple Watch / スマートウォッチ | 1 : 1.2 (396×484〜) | 通知確認画面、フィットネスアプリ紹介 |
【検索意図に合わせた活用Tips】
背景透過（アルファチャンネル）対応： 合成した画像は背景を透明にしてPNG保存できるため、CanvasやPowerPoint、Figma上での二次加工に最適です。「モックアップ 透過 無料」といったニーズに完全対応しています。
高品質な資料作成： スクリーンショットをそのまま貼るのではなく、デバイスフレームに「はめ込み合成」することで、資料の具体性とプロフェッショナルな印象が格段に向上します。
SNSマーケティング： X（旧Twitter）やInstagramの投稿用に、ベゼル（縁）の太さを調整して最新機種（iPhone 15/16等）風に見せることが可能です。光沢エフェクトを併用することで、広告バナーのような高級感を演出できます。
よくある質問（FAQ）
Q.ベゼルの太さを変えられるのはなぜですか？
A. デバイスの種類によって画面縁の太さが異なるため、微調整によって最新機種風に見せたり、逆にフレームを強調したりといったデザイン上の意図を反映しやすくするためです。
Q.画像の比率が合わない場合はどうなりますか？
A. ツールが自動的に「中央配置（Cover）」を行います。重要な情報が切れる場合は、事前に画像の比率を調整してからアップロードすることをお勧めします。
Q.保存ボタンを押しても反応しない場合は？
A. ブラウザのポップアップブロックや、プライベートモードでの制約を確認してください。最新のChromeまたはSafariでの利用を推奨します。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。