方法1 難易度★☆☆☆☆ モックアップ作成サイトを使う

最近は本当に便利なサイトがたくさん溢れています…！
こちらのサイトはURL入力または画像をアップロードするだけで、無料でモックアップを作ることができるサイトになります。

例えば以下の素材のPC画面部分に自社サイトのトップページを当て込みたいこととします。

緑の部分をクリックすると、英語表記ですが「画像をアップロードする」か「URLからスクリーンショットを引っ張ってくる」を選ぶことができます。そこで、自社サイトのトップページのURLを私は入力し、待つこと十数秒…

この通り自動でトップページの画像が当て込まれました。
かなり表面的な見え方にはなってしまいますが、Photoshopなどの専門的なソフトが無くても、さっとモックアップを作ることができるという点では本当に便利です！

今回はMac bookの画像を参考に持ってきましたが、他にもiphoneやデスクトップPC、メモ帳、看板などサイトには豊富に素材が揃っています。中には背景が透過されている画像もあるので、ダウンロードしたらそのまま使えちゃうというのもお手軽。ダウンロードできるものとしては「JPG」「PNG」「PDF」の3種類ですが、3パターンのサイズと任意のサイズのダウンロードも可能です。こういった画像素材は大きく重いものになりがちなので、サイズが選べるのは大変ありがたい…

デメリットとしては先述の通りですが、写真に対してモックアップ部分の明暗などを調整することができないというところです。物によって、より顕著に表面に貼り付けただけ感がどうしても出てしまいます。また、サイト側で画像を読み込んだ結果、左右が収まりきっていないなどサイズ感が上手く合わないこともあります。（サイトの画面とかであれば、検証ツールなどで使いたいサイズに合わせたものをスクリーンショットすると、当て込みが上手くいきやすいというコツはあります）
そのため、あくまでも「画像作成ソフトを持っていないけど、さくっとモックアップを作りたい」という方におすすめです。

紹介したサイト以外にもモックアップジェネレーターサイトはたくさんあるので、ぜひ見てみてください！
素材の公開数は多くないのですが、影の入りなどもある程度調整できるこちらが個人的にはおすすめです。

方法2 難易度★★☆☆☆ モックアップ用PSDファイルをダウンロード

やっぱりではありますが、画像関連はPhotoshopが強いです！
（ちなみにこの後紹介する方法もPhotoshopを使います…）
その中でも比較的簡単なステップでモックアップを作成する方法をまず紹介いたします。

素材配布サイトの中にはモックアップを簡単に作成出来るようにすでに調整されたデータというものがあります。「モックアップ　PSD　素材」などで検索すると出てくるのですが、当て込みたい画像とPhotoshopがあれば特に準備もなくモックアップを作成することが可能です。

例として以下のサイトよりフリー素材をダウンロードしてきました。

英語表記ではありますが、ダウンロードボタンは目立つのですぐに分かるかと思います！

ダウンロードが出来たらそのままPSDファイルをPhotoshopで開きます。

開いたらレイヤーパネルを見てスマートオブジェクトになっているところをダブルクリックします。（レイヤー上のアイコンはもちろん、この素材に関わらず「Chenge UI Design」のようにレイヤー名で「ここで当て込みたい画像を差し替えられる」と示してくれるものがほとんどなので、迷わずにいけると思います）

そうすると自動的にPhotoshop上で元々当て込まれていた画像が埋め込まれたファイルが開きます。

あとは、ここに当て込みたい画像を配置します。いい感じにサイズを整えて…

そのまま上書き保存すると、参照元のファイルの方も自動的に差し変わります！

このまま素材として使用することはもちろん、既にあるレイヤーを見ながら細かい影やハイライト位置も変えていくことができるため、Photoshop初心者の方でもある程度好みの素材に仕上げていくことが出来ると思います。

デメリットとしては当たり前ではありますが、モックアップ用に配布されている素材でしかこの作業ができないということです。自分の使いたいイメージのものを無数に配布されている中から探していかないといけないという点では仕方ないところにはなります。

ちなみに、こういったPSD素材をダウンロードする際のコツとしては、無理のない範囲内でなるべく大きい素材を選ぶことです。その分データサイズが大きくダウンロードに時間がかかったりPCへの負荷があるので、一概にはおすすめできないのですがやはりその分画質が担保されるため、後々どういった使い方をしても困りにくい点があります。折角作ったデータが小さくて画質がいまいちとなっては寂しいので…
もちろん使用用途として大きいサイズが不必要といった場合もあるかとは思いますが、そうしたらPhotoshopで簡単にサイズを変えればいいので「大は小を兼ねる」です…！

方法3 難易度★★★☆☆ Photoshopのゆがみツールで作る

今まではモックアップ用として配布されている素材に当て込みをしましたが、配布素材じゃなく自身で用意した画像に組み込みたいこともありますよね？
そんな時はモックアップ用の素材をPhotoshopを用いて自分で作りましょう！方法としては2パターンあるのですが、まずは比較的簡単な方を方法3としてご紹介です。

まずはモックアップを作りたい土台となる画像と当て込みたい画像の2点を用意します。
今回私はunsplashでダウンロードした画像と自社サイトのトップページのスクリーンショットを持ってきました。

unsplashは海外の方が撮影された素材がほとんどなのですが、無料で素材を使うことができるのでおすすめです。（個人・商用ともにOKという親切さ、ありがたい…）
画像が用意出来たら土台となる画像をPhotoshopで開き、その上から当て込みたい画像を「ファイル→リンクで配置」で開きます。

配置が出来たらある程度サイズ感を合わせて、メニューの「編集→変形→ゆがみ」をクリックしてから、当て込みたい画像の四隅を無理やり配置したい場所に合わせていきます。（Ctrlを押しながらでも自由変形が可能です）
見にくい場合には配置した画像の不透明度を下げて調整してみてください。

あとは素材によってではありますが、レイヤースタイルからベベルを調整して奥行き感の調整や光のあたりをグラデーションツールで作っていきます。

グラデーションは下のレイヤーにクリッピングマスクがかかるように新規レイヤーを作成（Shift+ctrl+N）→グラデーションツールで明るくしたいところから暗くしたいところに向かってスライド→描画モードを「乗算」・不透明度を下げる調整、をしました。

こちらで完成です！

自分の用意した素材からモックアップを作成できる点では比較的簡単にいける方法かなと思います。

この方法のデメリットとしては、当て込みたい画像の方を適正サイズで準備しておく必要があることです。極端に長さが違ったりするとゆがみツールを使った段階で違和感が出てきます。多少のサイズは問題ないのですが、万能ではないことは念頭に置いておく必要があるかなと思います。それでも当て込みたい画像を変形させるだけなので、さくっと作りたいときにはおすすめの方法です！

方法4 難易度★★★★☆ スマートオブジェクトで流用可能にする

方法3ではすでに自分で使いたい素材に対してモックアップを作成する方法を紹介しましたが、同じ素材をベースにして当て込みたい画像が複数ある場合には、方法2のようにスマートオブジェクトを作ってしまうのが一番楽です…！

方法3と同じ素材を使って作業を進めていきます。
ベースとなる素材を開いたらその上に長方形ツールで四角を作ります。

この状態で長方形レイヤー上を右クリックなどして「スマートオブジェクトに変換」を選択します。

その後に長方形を先ほどと同様に四隅を配置したいところに合わせていきます。

ここまでくれば先ほどの方法2,3と同じステップです！

スマートオブジェクト化した長方形のレイヤーをダブルクリックしてファイルを開き、当て込みたい画像を配置。サイズ感を調整して保存することで自動的に反映されます。
あとはベースに合わせてベベル・グラデーションツールなど細かい調整を行っていくことで完成です！

スマートオブジェクト化しておくことで、そのレイヤーで他の画像も差し替え放題になるため、量産・流用可能なデータになりました。

試しに自社サイトのブログ画面を当て込み…
こちらの方法であればスマートオブジェクトした先で開いたファイルの中で当て込みたい画像のサイズを調整できるため、大きなゆがみなどを作らずに画像を当て込むことが可能です。仮に大きめの画像を使用したとしても、適用範囲のみが表示されるため無駄なところをトリミングする手間なども不要です。（逆に画像が小さいと幅・高さが足りないとなりやすいので要注意です）

そのため、この方法でモックアップを作成する場合には、当て込みたい画像の方を部分的なスクリーンショット等ではなくなるべく大きい全面画像を用意することをおすすめします。

おまけ Illustratorの新機能（ベータ版）

今まではPhotoshopでの作業を紹介しましたが、実は最近追加された機能としてIllustratorでもモックアップを作成することができるようになりました。（まだベータ版なので初回はパネルのダウンロードが必要です）
Illustratorには画像編集の機能が豊富では無いため、この機能ができるまでは一度書き出すorCCライブラリに入れてからPhotoshopを開くという手間がかかっていました。そこからベクターデータを修正したいとなったらIllustratorに戻って…という作業も発生します。それが解消しそうな新機能ということで注目されています。

モックアップを作成したい画像とベクターデータを同じアートボードに開き、全てを選択してから「オブジェクト→モックアップ→作成」をクリックします。パネルを開いていればそこから作成も可能です。

あとは自動でIllustratorが計算をしてくれるため、読み込みが終わったら配置したい位置にベクターデータを移動するだけです。

コップの端のゆがみも計算されており、かなり自然な仕上がりになっていました！

ただ、直線的なベクターデータを複雑な形の中で自然にゆがませるのは苦手なようなので、まだ万能とは言えません…それでも、Illustrator上で作成したアイコンやイラストなどのベクターデータを、そのままIllustrator上でモックアップにすることが近い将来当たり前に出来るようになりそうです。

まとめ

モックアップの作成方法をおまけを含め5つ紹介しましたが、いかがだったでしょうか？
今回はPC画面への当て込みをサンプルとして挙げましたが、モックアップ自体は自由に作ることができます！アイディア次第で色々面白いことができるので、用途に合わせて色々試していただけたらなと思います。

今回はここまで。
最後までお読みいただきありがとうございました。