無料でハイクオリティなテンプレート写真に自由に画像をはめ込んでダウンロードできる「Mockup Photos」
ウェブサービスやアプリケーションを作成する際、動作する端末上でサービスやアプリがどのように見えるのかはUIデザインにおいて重要な要素です。そんな開発途中のプロトタイプを実際のデジタル端末の画面上に表示しているかのような写真が気軽に作成できるサービスが「Mockup Photos」で、無料でさまざまなテンプレート写真を使用して手軽に見栄えのチェックが行えるようになっています。
Mockup Photos - High quality mockup templates from around the world
https://mockup.photos/
Mockup Photosの使い方は簡単で、400種類以上用意されたテンプレート写真の中から気になるものをクリック。
すると個別のページが開きます。以下は小さなブラックボードの写真。
写真中央のカメラアイコンにマウスカーソルを合わせると、以下のような表示が出てくるのでクリック。
するとウインドウが開いて画像データを選択可能になります。テンプレート写真に追加したい画像を選択して「開く」をクリック。
すると、こんな感じで少しわかりづらいですが画像をテンプレート写真の中に追加することができます。
作成した写真は「Download now」ボタンからいつでもダウンロード可能。
ただし、ダウンロードするには無料のアカウントを作成する必要があります。上から名前・メールアドレス・パスワードを入力して「Sign up now」をクリックすればアカウントの作成は完了です。
また、多数あるデジタル端末の画面上に好きな画像を表示する場合、自前で用意した画像をアップロードする他に、「Take screenshot from URL」をクリックすれば自動でウェブページのスクリーンショットをテンプレート写真にはめ込んでくれます。
試しにGIGAZINEのURLを入力して「Take screenshot」をクリック。
すると、こんな感じで自動でページのスクリーンショットを追加してくれました。
なお、使用可能なテンプレート写真はトップページの検索ボックスから検索したり……
以下のようなテンプレート写真の種類から探すことができます。記事作成時点で用意されているのはAndroid端末の写真30種類、Apple端末関連の写真は296枚あり、最新のiPhone X関連は34枚もあります。また、デジタル端末以外にもメモ帳や黒板などに好きな画像を追加することが可能。
ただし、Mockup Photosには有料プランも用意されており、430種類以上あるテンプレート写真の中には有料会員以外だと写真全体に「Mockup Photos」の文字のウォーターマークが入ってしまうものもあります。なお、有料プランは月29ドル(約3100円)のプランと年228ドル(約2万4000円)のプランが用意されており、年228ドルのプランなら月々19ドル(約約2000円)の支払いで済むのでオトクです。
無料会員でも自由に使えるテンプレート写真を探すには、画面上部の「Freebies」をクリック。
すると以下のような画面になり、さまざまな検索条件を駆使してテンプレート写真の検索が可能となります。基本的に「Price」の「Free」を選択しておけば無料で使えるテンプレート写真のみが表示されます。また、各テンプレート写真のサムネイル右下にピンクの「FREE」アイコンが出ていれば無料で使える写真の証拠です。
というわけでどんなテンプレート写真が用意されているのか一部を紹介。これは航空機内の座席モニターに好きな画像を表示させるテンプレート。
Free mockup: In flight seat monitor
最新のiPhone Xに好きな画像を表示するテンプレートもあります。
Free mockup: Woman using black iPhone X mockup
女性がノートPCを使用している風のテンプレートや……
Free mockup: Woman working on laptop
白い部屋の中に置かれたiMacの画面に好みの画像を追加するテンプレート。
Free mockup: iMac in white home office
さらにはTVや……
Free mockup: TV in living room
複数のデジタル端末の画面に好きな画像を表示するテンプレートもあります。
Free mockup: Macbook iMac and iPad
・関連記事
無料で動きのついたデザインモックアップを作りiOS・Androidで動作確認ができる「Fluid UI」 - GIGAZINE
無料で簡単にフォトジェニックなアプリのモックアップ写真が作成できるウェブサービス「MOCKUP GENERATOR」を使ってみた - GIGAZINE
無料でドラッグ&ドロップしてアプリのプロトタイプをカンタンに作成できる「Pixate」 - GIGAZINE
iPadでサイトやページのモックアップ制作が可能な「Adobe Comp CC」 - GIGAZINE
・関連コンテンツ