2021年2月18日(木曜日)  (山下 莉穂)

デザイナー初心者向けモックアップ画像の作り方解説

こんにちは。
AliveCastアシスタントクリエイターの山下です。

今回は、Webデザイナー初心者向けにモックアップ画像の作り方を解説していきます。

まず、モックアップとは何ぞや？というところから。

引用：

モックアップ画像は実物のような見た目なので、クライアントへの提案やプレゼンをより伝わりやすく魅力的なものにできます。


この記事では、Web制作会社のホームページでよく見かけるような、下のモックアップ画像の作り方を紹介します。







準備するもの

・モックアップ素材のPSDデータ
こちらからダウンロードできます


・キャプチャ
モックアップ画像上のiMacとiPhoneにはめ込むキャプチャを用意します。
私は以下のツールを使っています。


PCキャプチャ用
FireShot

iPhoneキャプチャ用
WebCollector



では、準備ができたらさっそく作ってみましょう！


作成手順

ダウンロードしたPSDデータを開きます。

1番上にある「Delete Me」レイヤーを削除します。






デバイスたちがあらわれます。






今回、iPadとMacbookは使わないので、レイヤーグループを非表示にします。

また、デバイス下に反転している影も不要であれば、「Reflection」レイヤーグループを非表示にします。

iPhoneを右に移動するには、「Workspace」レイヤーグループの中にある「phone X」レイヤーグループを選択してCtrl + T (自由変形)で動かします。








下準備ができたので、ディスプレイに画像を入れていきます。

「Paste your design here」レイヤーグループの中にある、iMacのウィンドウ部分をダブルクリックします。








新しいタブが開き、空のレイヤーが用意されているので、ファイル＞埋め込みを配置から、任意のキャプチャ画像を配置します。








弊社の制作実績サイトのキャプチャを置いてみました。▼








Ctrl + S (Command + S) で保存して最初のタブに戻ると、綺麗に出来上がっています！







同じようにphone Xレイヤーにもキャプチャを配置すれば完成！







まとめ

実際に作ってみると、意外と簡単だったのではないでしょうか。
個人のポートフォリオなどにも使えそうですね！

最近はPhotoshopを使わなくてもドラッグ＆ドロップで簡単にモックアップ画像が作れるツールもあるので、今後も色々試してみたいと思います！