MacでスクリーンショットをiPhoneのフレームに入れる方法

2026年10月30日更新

MacでスクリーンショットをiPhoneのフレームに入れるいちばん早い方法は、デバイスを判別し、合うフレームを選んで書き出してくれるアプリにドロップすることです。手作業でやりたい場合は、画面部分が透過したフレームPNGをダウンロードし、Keynote、Figma、Pixelmator Proでその下のレイヤーにスクリーンショットを置きます。手順さえわかれば、どちらも1分もかかりません。

フレームに収めたスクリーンショットは、ひと目でスマートフォンだとわかります。フィードの中で、文字を読む前から、ただの画像ではなくアプリだと伝わります。このガイドでは、いちばん早い方法からいちばん手作業の多い方法まで、3つのやり方を紹介します。

始める前に：正しいスクリーンショットを用意する

フレームがきれいに合うのは、スクリーンショットがデバイス本来の解像度で画面全体を写している場合だけです。スマートフォンやシミュレータで撮れば、そのサイズになります。

Face ID搭載のiPhoneの場合：サイドボタンと音量を上げるボタンを同時に押します。
iOSシミュレータの場合：File > Save Screenを選ぶか、⌘ Sを押します。

AirDrop、写真、iCloudでMacに送ります。先に切り取ったりサイズを変えたりしないでください。たとえばiPhone 18 Proのスクリーンショットは1206 × 2622ピクセルで、このサイズがそのまま、どのスマートフォンで撮ったかをツールに伝えます。どのデバイスで撮ったスクリーンショットかわからないときは、スクリーンショットのサイズガイドでサイズとデバイスの対応を確認できます。

方法1：FeatureFrameにドロップする

FeatureFrameは、まさにこの作業のためのMacアプリです。スクリーンショットのピクセルサイズを読み取り、撮影したデバイスを判別して、そのスマートフォンの3Dモデルに収めます。

FeatureFrameを開き、スクリーンショットをウインドウにドロップするか、⌘ Vでペーストします。
iPhone 11 ProからiPhone 18 Pro Max、iPhone Air、iPhone Duo、iPad Pro、Air、miniまで、合うiPhoneやiPadを自動で選びます。デバイスとカラーは右側のパネルで変更できます。
角度エディタでドラッグしてスマートフォンを傾けるか、角度のプリセットから選びます。
Instagramの投稿なら4:5、Xなら16:9など、投稿先に合ったキャンバスの形を選び、背景を選びます。単色、グラデーション、macOSの壁紙、または自分の画像を使えます。
⌘ Cで画像をコピーしてそのまま投稿にペーストするか、ウインドウからドラッグするか、⌘ Eで720p、1080p、4Kのいずれかで書き出します。

1つのキャンバスに最大3枚のスクリーンショットを、横並び、縦並び、重ねて配置でき、サイズと間隔は共通になります。無料版ではホワイトとブラックのクレイスマホとクレイタブレットのフレームが使え、書き出した画像には小さなFeatureFrameバッジが入ります。FeatureFrame Proでは、本物のデバイスフレームすべて、自分のウォーターマーク（またはなし）、PNG書き出しが使えます。

方法2：無料のフレームPNGを使う

Keynote、Figma、Pixelmator Proをすでに使っているなら、フレームPNGで十分です。デバイスフレームのライブラリには、iPhoneとiPadの各機種の無料PNGがあり、画面部分はその機種のスクリーンショットがピクセル単位でぴったり収まるサイズで透過しています。iPhone 18 Proのフレームのように、各デバイスのページには対応するスクリーンショットのサイズと、正確なxとyの配置位置を載せています。

どのアプリでも決まりは同じです。スクリーンショットはフレームの下のレイヤーに置きます。フレームのベゼルと角の丸みが、スクリーンショットの端を覆ってくれます。

Keynoteの場合

新しいプレゼンテーションを作り、「書類」インスペクタでスライドのサイズを1080 × 1350など、使いたいキャンバスに設定します。
スクリーンショットをドラッグして入れ、次にフレームPNGをドラッグして入れます。
フレームを選択した状態で、「配置」>「最前面へ」を選びます。KeynoteはPNGの透過を保ちます。
両方を選択し、Shiftキーを押しながら一緒にサイズを変え、スクリーンショットを画面の開口部に合わせます。一緒に動くようにグループ化しておきます。
「ファイル」>「書き出す」>「イメージ」を選び、PNGを選びます。

Figmaの場合

キャンバスのサイズでフレームを作り、背景の塗りを設定します。
フレームPNGとスクリーンショットをドロップします。レイヤーパネルで、スクリーンショットをフレームの下にドラッグします。
両方を100%の大きさで、デバイスのページに載っているサイズと位置に設定し、グループ化してから、キャンバスに合うようにグループごと拡大・縮小します。
フレームをPNGかJPEGで書き出します。

Pixelmator Proの場合

フレームPNGを開きます。キャンバスはすでに適切なサイズです。
スクリーンショットをドラッグして入れ、「レイヤー」サイドバーでそのレイヤーをフレームの下に移動し、位置をデバイスのページに載っているxとyに設定します。
2つのレイヤーを結合またはグループ化し、キャンバスのサイズを変えて、いちばん下に背景のレイヤーを追加します。
「ファイル」>「書き出す」で書き出します。

方法3：AppleのProduct Bezels

AppleはDesign ResourcesページのProduct Bezelsで、最近のiPhoneとiPadの公式デバイス画像をPhotoshopファイルとPNGで公開しています。重ね方は同じで、スクリーンショットを下に、ベゼルを上に置きます。マーケティングにベゼルを使う場合、Appleはマーケティングリソースとアイデンティティのガイドラインを確認するよう求めているので、投稿前に読んでおきましょう。

細部を整える

ステータスバーのごちゃごちゃを隠す。バッテリー残量の少なさや、たくさんの通知アイコンはアプリから注意をそらします。シミュレータでは、キャプチャの前にxcrun simctl status_bar booted override --time 9:41 --batteryLevel 100を実行するか、スマートフォンの表示が整っているときに撮り直しましょう。
スマートフォンの周りに余白を残す。画像の端にくっついたフレームは窮屈に見え、フィードのプレビューで切れてしまうこともあります。キャンバスの少なくとも10分の1の余白をとりましょう。
やわらかな影を付ける。スマートフォンの下にうっすら影があると、背景から浮き上がります。控えめにしましょう。
合うフレームのカラーを選ぶ。暗い背景に明るいフレーム、またはその逆にすると、スマートフォンの輪郭がはっきりします。
プラットフォームのサイズで書き出す。各プラットフォームの形はアプリのスクリーンショットをシェアするときの画像サイズをご覧ください。

Macのスクリーンショットは？

Macのウインドウキャプチャにはデバイスフレームは不要です。すでにウインドウの形をしているからです。ウインドウをキャプチャし、余白と影を付けて背景の上に置きましょう。macOSが付けた影ごとキャプチャされている場合は、Macで影なしのスクリーンショットを撮る方法をご覧ください。FeatureFrameはウインドウキャプチャを認識し、macOSの影を切り取り、角の丸みを保ったまま、シンプルなカードとして収めます。

次のステップ

スクリーンショットをフレームに収めたら、あとは見せ方です。SNSでスクリーンショットを見栄えよく見せる方法では、背景、余白、シリーズ全体の統一感を説明しています。XでのシェアやInstagramのカルーセルのガイドもあります。レイヤー作業をすべて省くなら、Mac App StoreでFeatureFrameを入手しましょう。