スクリーンショットをアップロードするだけで、iPhoneやMacの枠に美しくはめ込み。 プレゼン資料やポートフォリオ、SNS投稿をワンランク上の仕上がりに導きます。
画像をここにドロップ
またはファイルを選択
モックアップ・フレーム・インサーターとは？
本ツールは、アプリのスクリーンショットや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には対応していません。
対応デバイスフレームと推奨画像サイズ一覧
各デバイスに最適化された合成を行うための、アスペクト比と解像度の目安です。
| デバイスカテゴリー | 代表的なアスペクト比 | 主な用途・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等）風に見せることが可能です。光沢エフェクトを併用することで、広告バナーのような高級感を演出できます。
デバイスモックアップを活用したコンバージョン率向上とデザインワークフローの効率化
生成したデバイス合成画像をただ資料に貼り付けるだけでなく、マーケティング成果の最大化やチーム間での合意形成を迅速に行うための、一歩進んだ実務向けデザイン戦略を解説します。
広告クリエイティブとランディングページにおけるファーストビュー最適化
ユーザーの直帰率を下げるためには、ページを開いた瞬間にサービスの使用環境を直感的に理解させることが重要です。
スクロールせずに視認できるファーストビュー（FV）に最新のスマートフォンフレームに収まったUIデザインを配置することで、実在するプロダクトとしての信頼感が生まれ、コンバージョン率（CVR）が平均して15パーセントから25パーセント向上することがマーケティング実証で明らかになっています。
FigmaやAdobe XDと連携したデザインレビューおよびクライアント提案の標準化
制作途中のワイヤーフレームやカンプをそのまま共有するのではなく、高解像度のデバイス筐体にマッピングした状態で提示することで、デザインレビュー時の認識のズレを最小限に抑えられます。
実機での見え方をあらかじめ再現しておくことにより、開発フェーズに移行した後の修正戻りを防ぎ、デザインの合意形成にかかる期間を約30パーセント短縮する業務効率化に繋がります。
ピクセルパーフェクトな画像配置を行うための事前解像度マッピング
デバイスごとの物理的な画面解像度と、グラフィックソフト側でのアートボード設定をあらかじめ同期させることで、文字の滲みやアスペクト比の歪みを完全に防ぐことができます。
例えばノートPC向けのデモ画面を作成する場合は、あらかじめソース画像を横幅2560ピクセル以上の実寸サイズでレンダリングしてから本ツールで合成を行うことで、網膜ディスプレイ（Retina表現）に対応した極めて鮮明なアセットを書き出すことが可能です。
よくある失敗と対策
画像サイズや比率のミスマッチで画面の端が切れ、低クオリティな合成画像になる
デバイスフレーム（iPhoneの9:19.5やMacの16:10など）と、アップロードするスクリーンショットのアスペクト比が一致していないため、自動トリミングや伸縮が発生し、重要なUIやテキストが外側に切れてしまう失敗です。
💡 対策・解決策を見る▼
背景透過処理を怠り、白背景や黒背景のままスライド資料に貼って浮いてしまう
背景色をデフォルトのホワイトやブラックのままPNG書き出ししてしまい、PowerPoint（パワポ）やGoogleスライド、デザインカンプに配置した際、四角い背景枠がデザインのノイズになり、資料全体の洗練さを損なう失敗です。
💡 対策・解決策を見る▼
最新機種（iPhone15/16等）と異なる古いベゼルやノッチで、アプリが古臭く見える
最新のスマホアプリやWebサービスを訴求したいのに、太いベゼルや古いホームボタン付きのデバイスフレームに画像をはめ込んでしまい、ターゲットユーザーやクライアントに「古いシステム・時代遅れ」という印象を与える失敗です。
💡 対策・解決策を見る▼
光沢・反射エフェクトの過剰な演出で、肝心のモックアップ画面が見づらくなる
デバイス筐体の質感をリアルに再現しようと、反射（シャドウやハイライト）の数値を強く設定しすぎてしまい、合成したスクリーンショット内の重要な文字や図表、UIデザインと重なって視認性を著しく低下させてしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.アップロードした画像ファイルやデザインデータが外部に漏洩する心配はありませんか
A. 一切ありません。当ツールは画像合成処理のすべてをユーザーのブラウザ内で行う完全ローカル処理型の安全設計です。選択した画像データが外部サーバーへ送信または保存される仕組みはないため、公開前のアプリ画面や機密性の高いデザイン素材でも安心してご利用いただけます。
Q.合成したモックアップ画像を保存する際のファイル形式や画質はどうなりますか
A. 書き出し時のファイル形式は透過処理に対応した高品質なPNG形式です。1200ピクセル四方の高解像度キャンバスにレンダリングして出力されるため、拡大しても文字やベゼルの境界線が滲みにくく、印刷物や大型モニター向けのプレゼン資料にも耐えられる画質でダウンロードできます。
Q.iPhoneやMacBookの枠に合成する画像の縦横比が合わない場合はどうなりますか
A. 選択したデバイスの画面比率とアップロードした画像のアスペクト比が異なる場合、枠内に収まるよう自動調整されます。画面の端が切れるのを防ぐためには、事前にスマホ用なら9対19.5、ノートPC用なら16対10の解像度を目安に画像をトリミングしてから読み込ませる方法が確実です。
Q.JPGやWebPなどPNG以外の拡張子の画像もデバイスフレームへはめ込み可能ですか
A. はい、可能です。本ツールはJPG、PNG、WebPの主要な3種類の画像形式に対応しています。ただし、動くアニメーションGIF形式のファイルには対応していないため、静止画のスクリーンショットやデザインカンプを準備してファイル選択エリアに配置してください。
Q.パソコンで作成したモックアップの編集や保存をスマートフォンからでも行えますか
A. はい、スマートフォンやタブレットのブラウザからでも同様にデバイスフレームへの合成やPNG保存が可能です。画面サイズに合わせたレスポンシブ設計になっているため、手元にある実機のスクリーンショットをそのままアップロードして手軽にモックアップを作成できます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。