【Design at Meta】スマホのモックアップ画像を入手できるサイト
この記事では、MacやiPhone、Androidなどのデバイスのモックアップ画像をダウンロードできる無料のサイト「Devices from Design at Meta」について書きます。
Facebookを運営している会社「Meta」が提供している無料のサイトです。サイトにアクセスすると各種デバイスの画像が表示されます。保存したいデバイスをクリックすることでPNG画像とSketch拡張子として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」を利用しています。
自分で合成したり編集したりする
解凍できたら中にフォルダーがあります。ダウンロードしたモックアップ画像によってはSketch拡張子のファイルもあるかもしれません。
デバイスの色、種類、影（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」で、埋め込んだ画像を貼っておきます。ただのスクリーンショットよりもおしゃれな雰囲気が出ました。
同社の他のデザインツール紹介
「Design at Meta」は他にも便利なツールを提供しています。いくつか紹介します。
デバイスを手で持ったモックアップ
iPhoneなどのデバイスを手で持った状態のモックアップ画像です。
https://design.facebook.com/toolsandresources/diverse-device...
ただのモバイルのモックアップ画像と比べて種類が少なく、利用用途も限定的だとは思いますが、人によっては便利かと思います。肌の色のバリエーションがあるのがいいなと思いました。
プロトタイプ用サウンドキット
プロトタイプ用インタラクションサウンドのコレクションうんぬん…。僕にはよく分かりませんでした。音素材ってことなのかな。ライセンスページが別で用意されているので利用する場合はよく確認しましょう。
https://design.facebook.com/toolsandresources/sound-kit-for-...macOS用のデスクトップキット
macOS（デスクトップ）上にあるUI要素のスケッチテンプレートです。
https://design.facebook.com/toolsandresources/desktop-kit/
僕はSketchファイルを開くソフトを持っていないので開けませんが、恐らく中にマウスカーソルなどの要素があるんだと思います。
余談ですが、Windows版はMicrosoftが提供しているようです。
https://learn.microsoft.com/en-us/windows/apps/design/downlo...オンライン上で完結できるモックアップサイト
「MockupBro」というウェブサイトは、用意されたモックアップ素材を選んで画像をアップロードして作成できるサービスです。
「オンライン上でサクッと作成したい！画像編集ソフトでちまちま画像はめ込みするのが手間！アップロードしたら自動的に埋め込んでくれるのがいい！」という方に便利だと思います。
https://www.naporitansushi.com/mockupbro-online-mockup-gener...
感想
以上、MacやiPhoneなどのモックアップ画像をダウンロードできる無料のサイト「Devices from Design at Meta」についてでした。
Macのスクリーンショットっぽいモックアップにできるサービスについても書いています。気になった方は参考にしてみてください。
