Device Mockup

デバイスモックアップは、スマートフォン、タブレット、ノートPC、ブラウザウィンドウなどのデバイスの枠の中にスクリーンショットを表示した画像です。枠によって、インターフェースがどのデバイスで動作しているかが見る人に伝わります。

各モックアップのテンプレートには、固定のサイズと比率を持つ画面領域があります。スクリーンショットがこの領域と一致しない場合、引き伸ばされるか、切り抜かれるか、余白に囲まれます。写真をもとにしたテンプレートでは遠近法も適用されるため、スクリーンショットは傾いた画面に合わせて歪められます。

モックアップは提示用の画像です。デバイスのエミュレーションとは異なります。エミュレーションはページ自体の描画方法を変えます。

デバイスモックアップが重要な理由

Webページ上に枠のないスマートフォンのスクリーンショットを置くと、単なる縦長の長方形に見えることがあります。枠があると、画面のサイズと文脈が同時に伝わります。また、複数の種類のスクリーンショットをランディングページやデッキで統一した見た目にできます。

よく使われるデバイスの枠

• 縦向きのスマートフォン。ノッチやDynamic Islandの領域がある場合とない場合があります。
• 縦向きまたは横向きのタブレット。
• 画面を斜めにしたノートPC。
• Webアプリのスクリーンショットに使う、シンプルなアドレスバー付きのブラウザウィンドウ。

デバイスモックアップの作成手順

1. 枠の画面比率に合わせて画面を撮影します。
2. デザインツールまたはモックアップ生成ツールでモックアップのテンプレートを開きます。
3. スクリーンショットを画面領域に配置し、角とノッチの位置を確認します。
4. 掲載先が必要とするサイズで書き出します。

Temposhotの Custom Area ピッカーには、iPhone 17 Pro（402×874）、iPhone 17 Pro Max（440×956）、Galaxy S25（360×780）、Pixel 9（360×808）などのスマートフォンのプリセットがあります。Webページの場合は、Website Capture のMobileデバイスサイズ 390×844 を使えます。

よくある間違い

• 比率が異なるスクリーンショットを使い、枠によって内容が切り落とされる。
• 小さい撮影結果を大きな枠に合わせて拡大し、文字がぼやける。
• ストアが通常のスクリーンショットを求める場所にモックアップを配置する。ストアの現在の要件を確認してください。
• 現行のハードウェアと合わなくなった古いデバイスの枠を使う。

同じスクリーンショットを繰り返し撮りますか？

macOSでのスクリーンショットの自動化 を使うと、スマートフォンサイズのすべての画面を1回の実行で撮影できます。

よくある質問

アプリストアはモックアップを受け付けますか？

ルールはストアごとに異なり、時間とともに変わります。提出の前に、ストアの現在のスクリーンショットのガイドラインを確認してください。

スクリーンショットの解像度はどの程度必要ですか？

少なくとも枠の画面領域のピクセルサイズが必要です。Retinaの撮影では通常、十分なピクセル数が得られます。

出典

• Mockup（Wikipedia）

関連リソース

• キャプチャソース: Custom Areaのプリセット。
• Social Image Composer: 余白付きの背景にスクリーンショットを配置します。
• Aspect Ratio Calculator: 枠の画面比率に合わせます。