デバイスモックアップジェネレーター

デバイスモックアップを使う理由

生のスクリーンショットは平面的に見えます。リアルなデバイスフレームに配置すると、たちまち本物のプロダクトとして認識されます — ランディングページ、アプリストアのリスト、ピッチデック、SNSの投稿に最適です。フレームは画像に一貫した形と適切なスケール感も与えます。

このツールはスクリーンショットをクリーンなベクターフレーム — スマートフォン、ラップトップ、またはブラウザウィンドウ — で包み、パディングとソフトシャドウを添えた背景の上に配置します。すべてフル解像度で描画されるため、どのサイズでも鮮明な仕上がりになります。

デバイスモックアップの作り方

1. スクリーンショットを開く。 ツールにドラッグするか、ファイルを選択するか、クリップボードから貼り付けます。
2. デバイスフレームを選ぶ。 スマートフォン、ラップトップ、またはブラウザを選択。スクリーンショットが画面エリアに収まります。
3. 背景をスタイリング。 グラデーションまたは単色を追加し、パディング、角丸、シャドウ、傾きを調整します。
4. ダウンロード。 どこでも使える高解像度PNG（またはJPG/WebP）を保存します。

どのフレームを選ぶべきか？

Webアプリやウェブサイトにはブラウザフレーム、モバイルアプリやストーリーズにはスマートフォンフレーム、ダッシュボードやデスクトップソフトにはラップトップフレームを使いましょう。デバイスなしで美しいスクリーンショットだけが欲しい場合は「なし」フレームを選び、背景とシャドウで演出してください。