スマートフォンモックアップ

モバイルのスクリーンショットを最新のスマートフォン枠に入れ、ドキュメントや SNS に使えます。

ブラウザ内で動作
アップロード不要
アカウント不要

ブラウザツールを読み込んでいます…

スマートフォンモックアップでできること

スマートフォンのスクリーンショットをそのまま使うと、枠のない縦長の長方形になり、ウェブページと間違えられがちです。スマートフォンの枠に入れれば、モバイルの画面だとすぐにわかります。枠は細いベゼル、角丸の画面、上部のカプセル形のカメラ部分、サイドボタンを備え、ブラック、シルバー、ナチュラル、ブルーから選べます。

「スクリーンショットの合わせ方」で、変わった形にも対応できます。「自動」は通常のスクリーンショットなら全体を、とても縦長のスクロールキャプチャなら上部を表示します。「幅」は画面の幅いっぱいにして上部を表示し、「全体」はすべてを収め、「塗りつぶし」は画面を覆って端を切り抜きます。「その他のオプション」の「画面の背景色」で隙間に色を付けられます。iPad の形のキャプチャにはタブレットモックアップを使ってください。

例

選ぶもの

組み込みのモバイル版請求ページのサンプル（「例を使う」）、786 × 1704 px

ダウンロード

example-billing-settings-phone-mockup.png
1128 × 2026 px：ブラッシュのグラデーションに黒いスマートフォン

画面は幅 786 px、高さは幅の約 2.17 倍で描かれます。余白は画面の幅の 16% です。

スマートフォンモックアップの使い方

「ファイルを選択」をクリックするか、スマートフォンのスクリーンショットを貼り付けます。
「スクリーンショットの合わせ方」「デバイスの色」「背景」を選びます。
「その他のオプション」で「画面の背景色」「余白」「影」を調整し、「.png をダウンロード」をクリックします。

知っておきたいこと

枠は特定の機種ではなく、一般的な最新のスマートフォンです。ストア掲載用に、特定のデバイスのノッチやボタン配置に合わせることはできません。
非常に小さなスクリーンショットは画面の幅が 640 px 以上になるよう拡大されるため、ぼやけます。それより大きなキャプチャ（幅 1290 px まで）は元のサイズで描かれます。
デスクトップのスクリーンショットをスマートフォンの枠に入れると、押しつぶされたように見えます。先にスマートフォンの幅のビューポートでページをキャプチャしてください。ビューポートサイズチェッカーが設定に役立ちます。

スマートフォンモックアップについてよくある質問

スクリーンショットをスマートフォンのモックアップに入れるには？

ここにスマートフォンのスクリーンショットを読み込むと、自動で枠の中に収まり、グラデーションの中央に置かれます。好みに合わせて「デバイスの色」と「背景」を変え、PNG をダウンロードしてください。

「スクリーンショットの合わせ方」の各オプションは何をしますか？

「自動」は通常のスクリーンショットなら全体を、とても縦長なら上部を表示します。「幅」は画面の幅いっぱいにして上部を表示します。「全体」は周りを塗りつぶして画像全体を表示します。「塗りつぶし」は画面を覆って端を切り抜きます。

ページ全体のスクロールキャプチャも使えますか？

はい。「自動」か「幅」ではその最初の 1 画面分が表示され、見えている割合が注記に表示されます。「全体」を選ぶとページ全体を画面に縮めて収めます。全体をざっと見せるには向いていますが、文字は小さくなります。