iPhoneモックアップを無料で作る方法｜スクショをきれいに見せる
iPhoneで撮ったスクリーンショットを、そのままLPやApp Storeに貼ると、どこか味気なく見えてしまう——そんな経験はありませんか。スクショを iPhone本体のフレームにはめ込む だけで、同じ画像でも一気に製品らしく、信頼できる見た目になります。
この記事では、iPhoneのスクショを無料できれいなモックアップに変える方法を、Mockpadを例に具体的な手順とコツまで解説します。アプリのインストールは不要、ブラウザだけで完結します。スマホ全般の話は スマホモックアップの作り方 完全ガイド も合わせてどうぞ。
iPhoneモックアップとは
iPhoneモックアップとは、アプリやWebサイトのスクリーンショットを、iPhone本体の形をしたフレームにはめ込んだ画像のことです。画面が実際の端末の中で動いているように見えるため、生のスクショより訴求力が高く、次のような場面で定番になっています。
- App Store の製品ページ
- アプリ・サービスの紹介LP（ランディングページ）
- プレゼン資料・ピッチ資料
- X（旧Twitter）や Instagram の告知画像
iPhoneは多くの人にとって見慣れた形なので、フレームに収めるだけで「これは実際のアプリ画面なんだ」と直感的に伝わります。
iPhoneモックアップの作り方（3ステップ）
Mockpad なら、次の3ステップで作れます。慣れれば1分ほどです。
1. スクリーンショットをドロップ
iPhoneで撮ったスクショ（Face ID搭載機種なら電源ボタン＋音量上ボタン）を、ツールの枠にドラッグ＆ドロップします。複数枚をまとめて入れると、各端末に自動で割り当てられます。
2. 端末・背景・角度を調整
本体カラー（ホワイト／ブラック／シルバー）、画面上部のスタイル（Dynamic Island／ノッチ／フルスクリーン）、背景（透過・単色・グラデーション）、傾きやレイアウトをスライダーで微調整します。プレビューはリアルタイムで更新されるので、仕上がりを見ながら詰められます。
3. 透過PNGで書き出し
整ったら書き出しボタンを押すだけ。背景を透過したPNGで出力できるので、LPやスライドの好きな場所に重ねて配置できます。解像度は1〜4倍から選べます。
iPhoneらしく、きれいに見せるコツ
iPhoneは形が広く知られている分、ディテールがズレると違和感が出ます。次の点を押さえると自然に仕上がります。
画面上部は実機に合わせる
お使いの機種に合わせて、Dynamic Island かノッチかを選びましょう。iPhone 14 Pro以降のProモデルと、iPhone 15以降のすべてのモデルは Dynamic Island、それ以前のFace ID機はノッチが目印です。ここが合っているだけで「ちゃんとしたiPhone」に見えます。
本体カラーは背景とのコントラストで選ぶ
明るい背景にはブラック、暗い背景にはホワイトやシルバーが映えます。画面の中身を主役にしたいときは、本体カラーは控えめなものを選ぶと中身が引き立ちます。
画面比率を崩さない
モダンなiPhoneの画面はおよそ 19.5:9 の縦長です。スクショを無理に引き伸ばさず、元の比率のまま収めると自然に見えます。Mockpadは端末枠に合わせて自動でフィットさせるので、ここで手作業に悩む必要はありません。
影は淡く、奥行きを意識する
端末の下にやわらかい影を落とすと、背景からふわっと浮き上がります。ぼかしは強め・濃さは控えめにすると上品です。少しだけ（5〜15度ほど）傾けると、平面的なスクショに立体感が出ます。
用途に合わせて解像度を上げる
拡大して使う場合は、書き出し倍率を2〜3倍に上げておくと、引き伸ばしても粗くなりません。
用途別の使い分け（App Store・LP・SNS）
App Store
審査では端末サイズごとに決められた寸法のスクリーンショットが必要です。フレーム付きのモックアップを数枚並べると、機能が一目で伝わります。必要なサイズや並べ方は App Storeスクリーンショットの作り方・サイズ完全ガイド にまとめています。
LP（ランディングページ）
背景を透過で書き出し、ページの好きな位置に重ねるのがおすすめです。2台を斜めに配置すると動きが生まれ、複数画面を一度に見せられます。
SNS
1台を少しだけ傾け、ブランドカラーのグラデーション背景にすると、流れるタイムラインの中でも目を引きます。
よくある質問
Q. 本当に無料ですか？ はい。スクショの読み込みから書き出しまで無料で使えます。書き出した画像には「Made with Mockpad」の小さな表記が入ります。
Q. アップロードした画像は保存されますか？ いいえ。加工はすべてブラウザ内で完結し、画像がサーバーに送信・保存されることはありません。
Q. 古いiPhone（ホームボタン付き）でも作れますか？ 画面上部を「フルスクリーン」やノッチに切り替えれば、近い雰囲気のモックアップを作成できます。
まとめ
iPhoneのスクショは、フレームにはめ込むだけで「伝わるビジュアル」に変わります。画面上部の形・本体カラー・画面比率の3点を実機に合わせれば、無料ツールでも十分プロっぽく仕上がります。まずは手元のスクショで試してみてください。