簡単&便利!サクッと手軽にモックアップが作れる「MockupPhotos」

簡単&便利!サクッと手軽にモックアップが作れる「MockupPhotos」

以前、Twitterをきっかけにバナー制作のお仕事をいただいたとき、「スマホのモックアップをバナーの中で使いたい!」と思い、手軽に作れるサイトがないか調べていました。
そのときに見つけたMockupPhotosというサイトがとても便利で使いやすかったので、今回ご紹介したいと思います(^^)

▼バナー制作したときの記事はこちら
https://webdesign-note.net/twitter-banner/


MockupPhotosについて

MockupPhotosとは、その名の通り、自分の写真やサイトをスマホやPCと合成して、モックアップを自動作成してくれるサイトです。Illustrator/Photoshopを持っていない方や使いこなせていない方でもご安心を!無料会員登録をするだけで、誰でも簡単にサイト上でモックアップを作成できます。

豊富なモックアップ素材

モックアップの種類は、定番のスマホやPCから、街の看板、ポスター、絵画まで様々。例えば同じ「スマホ」でも、手に持っているスマホや机に置いてあるスマホなど、シチュエーションが幅広く用意されているので、自分に合ったパターンのモックアップ素材が必ず見つかります!

今回は、WebDesignNoteのトップページで、4パターンのモックアップを作成してみました。

モックアップ
モックアップ
モックアップ
モックアップ

最後の2つに関してはありえないシチュエーションなのですが笑、このようなモックアップを簡単に作ることができちゃいます!

モックアップの作り方

  1. 公式サイト右上の「Sign up」をクリックします。
  2. MockupPhotos

  3. Facebookで登録または氏名・メールアドレス・パスワードを入力し、「Sign up now」をクリックします。
  4. MockupPhotos

  5. トップページ中央の検索窓に、使用したいモックアップ名を英語で入力します。(例:iPhone、Poster など)
  6. MockupPhotos

  7. モックアップの一覧が出てくるので、好みの画像をクリックします。
  8. MockupPhotos

  9. 緑の「PLACE IMAGE HERE」をクリックし、画像アップロードかURL設定のどちらかを選びます。
  10. MockupPhotos

  11. URLの場合は、モックアップにしたいサイトのURLを入力し、「Take screenshot」をクリックします。
  12. MockupPhotos

  13. 画像サイズを選択し、「Download now」をクリックすれば、モックアップの完成です。
  14. MockupPhotos

モックアップ素材に合わせて、自動で画面の幅や角度なども調整してくれるので、とても自然な仕上がりになります。データ形式は、JPG/PNG/PDFのいずれかから選択できるので、お好みの形式で保存してください。

サイトは全て英語表記ですが、検索やアップロードなどの操作方法は直感的でとても分かりやすいので、英語が苦手な方でも迷うことなく作れます。皆さん、ぜひ試してみてくださいね!

Designカテゴリの最新記事