デバイスモックアップ — 画面写真を端末の枠にはめる
スクリーンショットをスマートフォンやノートパソコンの枠に合成します。資料やストアの紹介画像に使える形で書き出せます。
画面写真をそのまま資料に貼ると、どこで動いているものか伝わりません。端末の枠に入れるだけで、アプリなのかウェブなのか、スマートフォン向けなのかが一目で分かります。
提案資料、ブログの紹介記事、アプリストアの画像。同じ画面写真でも、枠があるかどうかで受け取られ方が変わります。
先に比率を合わせる
端末の画面には決まった比率があります。合わない画面写真を入れると、引き伸ばされたり左右が切れたりします。スマートフォンの枠に入れるなら、9:16に近い縦長の画面写真を用意してください。
実機で撮った画面写真がいちばん確実です。撮れない場合は、ブラウザの開発者ツールで端末の大きさに切り替えてから撮ると、実際の表示に近いものになります。
パソコンの枠に入れる場合は16:9か16:10です。縦長の画面写真を入れると上下が大きく余ります。
用意する画面写真
| 枠 | 比率 | 撮り方 |
|---|---|---|
| スマートフォン | 9:16前後 | 実機のスクリーンショット |
| タブレット | 3:4前後 | 実機、または開発者ツール |
| ノートパソコン | 16:10前後 | ブラウザ全画面のスクリーンショット |
何を見せたいか決めてから
端末の枠に入れると画面は小さくなります。細かい文字が並んだ画面をそのまま入れても、資料では読めません。見せたい部分だけを切り出してから入れるか、拡大した部分図を別に添えてください。
並べて比較するときは、同じ枠と同じ大きさで揃えてください。端末の種類が混ざると、比べたいはずの中身より枠の違いが目立ちます。
画面写真の中に個人情報が写っていないか、書き出す前に確認してください。通知欄の内容、アカウント名、実在の住所。資料に残ってしまう事故はよく起きます。
よくある質問
どの端末の枠がありますか？
スマートフォン、タブレット、ノートパソコンの枠を用意しています。
画面写真が引き伸ばされます。
枠の比率と合っていません。実機で撮るか、ブラウザで端末の大きさに切り替えてから撮ってください。
背景を透明にできますか？
書き出しの設定によります。資料に貼るなら背景色を指定しておくほうが扱いやすくなります。
画像はアップロードされますか？
されません。合成はすべてブラウザの中で行われます。