こんにちは、こら（@korasampo）です。
先日、初めてモックアップを作ってみたので、作り方や使用したおすすめのサイト等ご紹介したいと思います。
はじめに
先日オンラインサロンで、
「架空の商品のデザインを作る」
という課題に挑戦し、
私は、大好きな梨のジャム瓶のラベルを作りました。
そこで、いちげ氏に
いい感じだから、モックアップを作ってみるといいんじゃないかな？
とアドバイスをいただきました。
そういえば、作ったことなかったなぁ、モックアップ。
ということでモックアップ作りにチャレンジしてみることにしました。
モックアップとは
モックアップとは、直訳すると「模型」という意味を持ち、外見を本物そっくりに作る見本のことを指します。
製品完成時形に仕上がったデザインサンプルのようなものです。
作ったモックアップ
すごい、作ったものがパワーアップしているように見える…！！！
そして製品ができていなくとも、実際に組みたった形に仕上がるのは、なんだか感慨深いですね。
使用したモックアップ素材サイト
今回素材をダウンロードしたサイトは、こちら↓↓
こちらのサイトは、プロダクト系の素材が豊富で、メールアドレスを登録すれば無料で素材のダウンロードができます。
モックアップの作り方
１. モックアップ用のデータをダウンロードします
素材サイトのダウンロードボタンをクリックすると、
Googleドライブが開きます。
該当のzipファイルをPCにダウンロードし、開くと、
こんな感じのデータがダウンロードされました。
２. .psdのデータをPhotoshopで開きます
.psdデータをひらいたら、
レイヤーの「yourdesign」を展開し、
スマートオブジェクトサムネイルの部分をダブルクリックします。
すると、新しいファイルが開きます。
３. データを配置します
ここに、モックアップにしたい素材のデータをサイズに合わせて配置します。
上書き保存して閉じ、
先ほどのファイルに戻ります。
すると…
完成している！！
あとは、お好みで他のレイヤーを調整したら立派なモックアップの完成です。
とても簡単でした。
その他のおすすめモックアップ無料サイト
他にもモックアップを作ってみたので、活用したサイトをご紹介します。
Pixelbuddha
こちらのサイトはメールアドレスを登録すれば、ダウンロード可能です。
幅広いイメージのモックアップ素材が揃っていて使いやすいです。
このサイトの素材を使用して作ったモックアップ↓↓
mockup photos
こちらのサイトは、フォトショップを持っていなくても、
データをアップロードするだけで、モックアップが作れます。
簡単でとても便利。
（メールアドレスの登録は必要です）
紙のイメージやPCなどの画面上のイメージが多いです。
このサイトの素材を使用して作ったモックアップ↓↓
まとめ
今まで作っていなかったモックアップ。
こんなに簡単にできるし、制作物のクオリティも高く見せてくれるんですね。
もっと早くから活用していけば良かったなぁと思います。
Photoshopを持っている方はぜひ作ってみてはいかがでしょうか。
