【Design at Meta】スマホのモックアップ画像を入手できるサイト
この記事では、MacやiPhone、Androidなどのデバイスのモックアップ画像をダウンロードできる無料のサイト「Devices from Design at Meta」について書きます。
Facebookを運営している会社「Meta（メタ）」が提供している無料のサイトです。サイトにアクセスすると、各種デバイスの画像が表示されます。保存したいデバイスをクリックすることで、PNG拡張子として、PCに保存できます。
素材を再配布したり、免責事項（Disclaimer）に反しない限りは、無料で利用できるようです。（参考）
ダウンロードできるデバイスには、以下のような種類があります。一例です。
- Apple iMac
- iPad
- iPhone
- Apple Watch
- Google Nexus
- Google Pixel
- Microsoft Surface
- Samsung Galaxy
スマホやPCのデバイスの型だけが、画像として保存されています。中の画面は何もないので、自分で合成できます。アイキャッチ画像や、スクリーンショットをより美しく仕上げたい時に役立つと思います。
リリース元：Meta（旧名：Facebook）
アクセス方法
以下のサイトからアクセスできます。英語のサイトなので、ページ翻訳を利用するといいと思います。
https://design.facebook.com/toolsandresources/devices/モックアップ画像のダウンロード方法
サイトにアクセスすると、「免責事項（Disclaimer）」と「ダウンロード」リンクが表示されます。利用前に、免責事項を確認することをおすすめします。
トップページの「ダウンロード」ボタンは、全デバイスの画像一括ダウンロードです。
容量もそこそこあり、不要なデバイス画像もダウンロードされます。欲しいデバイスが決まっている場合は、ピンポイントで個別ダウンロードがいいと思います。
ページをスクロールすると、各デバイスの画像が表示されます。各種iPhone、MacBook、Apple Watchなど、様々な機種・デバイスがあります。
試しに、「Apple iPhone 14 Pro」のモックアップ画像を入手してみます。
クリックするとダウンロードが開始されます。個別ダウンロードの場合は、一瞬で完了すると思います。
ダウンロードできたら、圧縮ファイルになっているので解凍します。解凍ソフトは、各自で用意します。僕は、「CubeICE」を利用しています。
解凍できたら、中にフォルダーがあります。デバイスの色、種類、影（Shadow）の有無によって、分類されています。
フォルダー内に、PNG画像のモックアップが用意されています。「Apple iPhone 14 Pro」の場合は、Deep Purple（ディープパープル）、Golden（ゴールド）、Silver（シルバー）、Space Black（スペースブラック）が用意されていました。
画像編集ソフト「GIMP」で開いてみました。PNG拡張子になっていて、背景は透過されています。スマホの型だけがあり、中の画面がない状態です。自分で好きなようにカスタマイズできます。
画像を埋め込むには、ちょっと技術が必要になります。「Apple iPhone 14 Pro」、「Apple Watch Series 6」、「Apple iMac Pro」で、埋め込んだ画像を貼っておきます。ただのスクリーンショットよりも、おしゃれな雰囲気が出ました。
感想
以上、MacやiPhoneなどのモックアップ画像をダウンロードできる無料のサイト「Devices from Design at Meta」についてでした。
Macのスクリーンショットっぽいモックアップにできるサービスについても書いています。気になった方は、参考にしてみてください。
https://www.naporitansushi.com/screely/