デバイスモックアップ

デバイスモックアップとは、スクリーンショットをスマートフォン、ノートパソコン、タブレットなどの実物に近い端末フレームへ配置し、マーケティング、プレゼンテーション、ドキュメントで利用時の見え方を示すものです。

Related workflow terms: スクリーンショットのワークフロー, レスポンシブスクリーンショット.

デバイスモックアップが役立つ理由

加工していないスクリーンショットは、どの環境の画面なのかを判断する手掛かりが少ない長方形の画像です。モバイルアプリなのか、デスクトップのダッシュボードなのか、タブレット向けの画面なのかは、ピクセルだけではすぐに伝わりません。端末フレームで囲むと、その背景がひと目で分かります。

マーケティング素材では、説明を加えなくても対応プラットフォームを示せます。プレゼンテーションでは、スライドの背景ではなく製品へ視線を導けます。ドキュメントでは、手順がどのプラットフォームを対象としているかを明確にできます。

複数の素材に統一感を持たせる効果もあります。提案資料のスクリーンショットをすべて同じ角度のノートパソコンフレームへ収めれば、撮影した時期が異なっていても、意図のそろった見た目になります。

よく使われるデバイスフレーム

• スマートフォンのフレーム： モバイルアプリのマーケティング、アプリストアの掲載画像、SNS広告でよく使われます。iPhoneとAndroidの輪郭を模した素材が広く提供されています
• ノートパソコンのフレーム： SaaS製品、Webダッシュボード、デスクトップソフトウェアに使います。MacBook風の輪郭が一般的ですが、プラットフォームを限定して見せたくない場合は汎用フレームが適しています
• タブレットのフレーム： タブレット向けアプリや、中間サイズのブレークポイントにおけるレスポンシブレイアウトを示す場合に役立ちます
• ブラウザウインドウのフレーム： アドレスバーやナビゲーションボタンなど、最小限のブラウザ部分だけを加えます。端末そのものより、ブラウザ上の画面だと伝えることが重要なWebアプリに向いています
• 複数端末の合成画像： スマートフォン、タブレット、ノートパソコンのフレームを1枚にまとめ、ブレークポイントごとの表示を示します

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

最も簡単なのは、テンプレートを使う方法です。画面部分が透明になったPNGまたはSVGの端末フレームを用意し、そこへスクリーンショットを配置します。多くのデザインツールに同様の機能があり、専用のモックアップ作成ツールなら位置合わせと拡大・縮小も自動化できます。

モックアップを頻繁に作る場合は、処理を自動化すると手作業を減らせます。デバイスフレームに対応した撮影ツールなら、撮影時に選んだフレームをスクリーンショットへ付けられるため、デザインツールを経由する必要がありません。製品発表用に数十枚を作る場合や、複数の端末サイズに合わせてアプリストア用素材を用意する場合に便利です。

技術面で重要なのは解像度を合わせることです。スクリーンショットのピクセル寸法は、端末フレームの画面領域と一致させる必要があります。高解像度のフレームへ低解像度のスクリーンショットを入れるとぼやけます。大きすぎる画像をフレーム内で縮小すると、細部が失われます。初めから適切な解像度で撮影すれば、どちらも避けられます。

実務では、利用時の背景を見せる必要があるスクリーンショットだけをモックアップにします。ドキュメントやQAでは、加工していない画像のほうが明瞭なことが一般的です。発表用素材やストア掲載画像では、端末フレームを付ける意味があります。

よくある失敗

• 古い端末フレームを使う： 何世代も前のスマートフォンを使うと、製品やマーケティング素材が更新されていない印象を与えます。素材を新しく見せたい場合は、現行世代に合うフレームを選びます
• スクリーンショットとフレームの解像度が合っていない： 幅1,170ピクセルの画面用フレームへ幅750ピクセルのスクリーンショットを入れると、ぼやけて見えます。撮影解像度をフレームの画面領域に合わせてください
• 3Dの角度を多用する： 奥行きの強い斜め向きのモックアップはヒーロー画像では目を引きますが、実際のUIは読みにくくなります。3Dフレームは全体を見せる画像に使い、内容を読ませる画像には正面向きの平面フレームを使います
• セーフエリアを確認しない： 端末フレームによっては、ノッチ、角丸、ステータスバーが画面の一部と重なります。スクリーンショットの重要な内容が隠れないように確認してください