デバイスモックアップ

Device Mockup

スクリーンショットをスマホ・タブレット・ノートPC・ブラウザの枠にはめ、背景と影を添えます。

スクリーンショットをスマートフォン・タブレット・ノートPC・ブラウザの枠に収め、最大3倍の大きさでPNGとして書き出します。枠は角丸の長方形からcanvasに描いていて、どこかの製品の写真ではありません。だから商標にあたるものは何もなく、どの倍率でも輪郭が鮮明なままです。スクリーンショットはタブの外に出ません。

🔒 ブラウザの中だけで動きますmockupscreenshotpresentationdevice

スクリーンショットを置いてください

PNG・JPEG・WebP。すべてこのタブの中で行います。

端末

合わせ方

余白

背景

影

背景を透明に

プレビュー

枠は写真ではなく図形です

スマートフォン・タブレット・ノートパソコン・ブラウザーウィンドウは、どれも角の丸い四角形をいくつか組み合わせてキャンバスに描いています。特定の製品を撮った写真ではなく商標も含まないので、どこに使っても構いませんし、どの倍率で書き出しても輪郭がぼやけません。画面の比率は今の端末に合わせてあり、スマートフォンが 19.5:9、タブレットが 4:3、ノートパソコンが 16:10 です。スクリーンショットの比率がそれと違うときは、「埋める」が真ん中を切り取り、「全体を見せる」が余白を残します。縦に長いページを撮ったものは、たいてい「上に合わせる」が合います。

書き出した PNG は PNG 圧縮で小さくできます。共有用のカードは OGP画像作成で作れます。

使い方

スクリーンショットを置きます
PNG、JPEG、WebPです。下の統計の行に、画像の比率と枠の画面の比率が並びます。次の選択がどう転ぶかを決める数字です。
枠を選び、次に画像の収め方を選びます
coverは中央を切り取って画面を埋め、containは全体を見せて余白を付け、上そろえは長いページのキャプチャのためのものです。ページの上端を残して、あとは下にはみ出させます。スクロールするページのスクリーンショットがふつう見せたいのはそれです。
余白と背景を決めます
切り取ったものではなく構図を取ったものに見せているのは余白です。透明な背景は、画像を色のあるスライドや、背景を自分で決められないページに載せるときに選びます。
理由がなければ2倍で書き出します
プレビューの下の行に、選んだ倍率での正確な出力サイズが出ます。2倍は高解像度の画面やREADMEにちょうどよく、3倍は印刷や大きなスライド向けで、ファイルは大きくなります。