無料でモックアップが作れるサイト!Mockup Photosの使い方

今回は、無料なのにクオリティの高いモックアップを誰でも簡単に作れるサイト「Mockup Photos」の使い方を紹介したいと思います。

企画書やデザイン提案などでモックアップを使う機会が多い方は参考にしてみてくださいね。

こちらの記事はサイトを利用してモックアップを作る方法を解説しています。

Photoshopを使ったモックアップの作り方を知りたい方は下記の関連記事をご覧ください。

無料でモックアップが作れるサイト「Mockup Photos」

制作段階のWEBサイトやポスターなどのデザインを提案する際にモックアップは欠かせませんが、Photoshopなどの画像編集ソフトでモックアップを作るのは手間も時間もかかります。

それどころか、そもそもPhotoshopを持っていない方も多いと思います。

しかし、今回紹介する「Mockup Photos」を使えば、専用のソフトがなくても手軽にモックアップを作ることができてしまうのです!

 

「Mockup Photos」の使い方

「Mockup Pfotos」に無料登録する

Mockup Photosを利用するには無料登録が必要なので、まずはMockup Photosの公式サイトから【Sign up】を選びます。

 

名前、メールアドレス、好みのパスワードを、英文字か数字でそれぞれ入力して【Sign up now】をクリックします。

登録が完了したらスグにログインした状態で利用できます。

 

もし、ログアウトしてしまった場合はトップページから【Log in】を選んでください。

 

最初に登録したメールアドレスとパスワードを入力すれば、いつでもログインできます。

 

ベースになる写真を選ぶ

ログインしたら、早速モックアップのベースとなる写真を探しましょう。

写真はキーワード検索することもできますが、英文で検索するのが面倒なので、今回はトップページの下の方にあるジャンルから【Poster】を選択します。

他にもiPhoneやiPadなどのデバイスもあるので、WEBサイトのモックアップにも利用できます。

 

 

ポスターの写真がズラッと一覧表示されるので、好みの写真を選んでクリックします。

 

モックアップを作成する

ポスターとノートパソコンの2点の画像を合成するので、まずはポスターの部分をクリックして選択します。

 

【Upload Image】を選びます。

ちなみに【Take screenshot from URL】を選ぶと、サイトの画面をURLから直接合成することもできますよ。

 

パソコンに用意しておいた画像を選んでアップロードします。

 

 

一瞬でポスターにイラストが反映されましたね。

次はそのままノートパソコンの画面をクリックして、同様の操作で画像をアップロードすればオッケーです。

 

 

ノートパソコンに反映された画像は、トリミング範囲を変更することも可能です。

このままノートパソコンの部分を再度クリックします。

 

 

【Re-position image】を選びます。

 

 

トリミング画面に切り替わるので、大きさや位置を変更します。

白い四角がノートパソコンの画面の範囲なので、範囲を上の方に移動してみました。

トリミング範囲を調整したら【OK】を選択します。

 

ちょっと分かりにくいですが、さっきとは少しイラストの表示範囲が変わりました。

 

全ての作業が完了したら、画像のファイル形式とサイズを選んで、画面の下にある【Download now】をクリック。

これでパソコンにモックアップ画像がダウンロードされます。

 

こちらが完成したモックアップです。

利用する画像さえ決まれば、モックアップを作る作業は3分〜5分程度といったところしょうか。

ホントにあっという間にモックアップが完成です。

モックアップは商用利用できる

作ったモックアップは、SNSやショッピングサイトで公開するといった宣伝用としての商用利用はオッケーです。

ただし、さすがに作ったモックアップ自体を販売するのはNGだと思うので、そこまで気になる方は、Mockup Photosに直接問い合わせてみるのがよいかと思います。

参考:【1000以上のフレームから、 商用フリーのはめこみ合成画像を 作れるサービス:Mockup.Photos】

おわりに

以上、無料でモックアップが作れるサイトMockup Photosの使い方について解説しました。

今まではPhotoshopで時間をかけてモックアップを作ってましたが、ホントに面倒くさい作業でしたが、Mockup Photosなら一瞬でモックアップが作れるんだからホントにビックリですね(笑)

しかも無料でできるんですから使わない手はないかと。

Mockup Photosは英語サイトなのでとっつきにくいかも知れませんが、慣れればどうってことありません。

手軽にモックアップが作りたい方は、是非使ってみてくださいね。

読者の皆さんの応援で管理人は頑張れます! この記事が少しでもお役に立てたならポチッとブログランキングに投票していただくか、SNSで共有してくださいね。

ブログランキング・にほんブログ村へ



スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう