デザインを実際に使われるイメージに近づける表現方法として、モックアップというものがあります。分野によって違いはありますが、ここではプロダクト系のものをPhotoshopでお手軽に表現できちゃう方法をご紹介します。

やり方は簡単です!
下記URLのフリーのPhotoshopデータを例にやってみます。
https://graphicburger.com/mock-ups/

ダウンロードしたデータを開き Photoshopで遊ぶ
ダウンロードしたデータを開き

デザインの元となるレイヤー(赤枠)を右クリック。「コンテンツを置き換える」を選択し、デザインを選ぶだけ! Photoshopで遊ぶ
デザインの元となるレイヤー(赤枠)を右クリック。「コンテンツを置き換える」を選択し、デザインを選ぶだけ!

元々リンクされていたロゴ Photoshopで遊ぶ
元々リンクされていたロゴ
置き換えたロゴ Photoshopで遊ぶ
置き換えたロゴ
出来上がったイメージ Photoshopで遊ぶ
でき上がったイメージ

あっという間です!
もう一度、別の例でやってみます。

元になるデータを用意して Photoshopで遊ぶ
元になるデータを用意して

コンテンツを置き換える Photoshopで遊ぶ
コンテンツを置き換える

Photoshopで遊ぶ

Photoshopで遊ぶ

できあがり Photoshopで遊ぶ
できあがり!

このように簡単な操作でちょっとだけ良い見せ方ができちゃいました。

元々のテンプレートを作るのは少し時間がかかるのですが、遊ぶ分にはWEBにあがっているフリーの素材でも十分!「モックアップ psd」などで検索すれば、いろいろ出てきますので、Photoshopを持っている方は是非お試しあれ。

制作部 Yでした。