モックアップのやり方を詳しく解説します

Webサイト制作
Webデザイン
2021.06.18
モックアップのやり方

実際の仕上がりイメージをクライアントと共有する手段として非常に有効なモックアップ。Webサイトやアプリはもちろん、名刺やチラシなどの紙媒体でもモックアップを使用することをおすすめします。
モックアップを作ると聞くと、ハードルが高いように聞こえるかもしれませんが、意外と簡単にできるので、本記事を参考にWebデザイナーの方はぜひ作ってみてください。

モックアップとは

モックアップとは、Webサイトやアプリなどのデザインを、スマホやPCの画面にはめ込み、実際の仕上がりイメージを確認することができる、いわば見本品のようなものです。
リリースする前に、クライアントとモックアップを共有しておくことで、認識のズレが無くなったり、見えていなかった問題点が見つかったり、議論が活発になったりと様々な点で有効な手段です。
そのため、デザイナーの方はWeb・グラフィック問わず、モックアップを作れるようにしておくことをおすすめします。

モックアップの作り方　Photoshopの場合

Webデザイナーであれば、Photoshopを持っている、使用しているという方も多いのではないでしょうか。Photoshopを使えば、綺麗なモックアップを簡単に作ることができますよ。

Photoshopでのモックアップ作成手順

では、まずはPhotoshopを用いたモックアップのやり方をご紹介していきたいと思います。

素材を準備する

まずは以下を準備しましょう。

    


  • モックアップ素材

  • モックアップにはめ込むキャプチャ

モックアップ素材については「スマホ　モックアップ」「PC モックアップ」などと検索することでフリー素材を見つけられます。
今回は以下の画像を使用していきたいと思います。

モックアップ

Photoshopでの操作

不要なデバイスがあれば、非表示にしましょう。今回は、デスクトップとスマホのみを使用したいので、他は非常時にします。

Photoshop作業画面

iPhone、iMacのレイヤーグループを開き、「YOUR SCREEN HERE」と書かれたレイヤーをダブルクリックします。
新たなタブが開くので、そこにキャプチャをはめ込んでいきます(画像はiMacの画面のレイヤー)。Photoshopメニューのファイルから埋め込みを配置でキャプチャを選択しましょう。

Photoshop作業画面
Photoshop作業画面

iMac、iphoneそれぞれの画面にキャプチャを配置したら、保存して元のタブに戻ります。

Photoshop操作画面

これで、imacとiphoneのモックアップを作ることができました。

モックアップの作り方　Mockup Photosの場合

続いて、「Mockup Photos」を使用した、モックアップの作り方をご紹介します。
「Mockup Photos」とは、オンライン上で画像をはめ込むことでモックアップを簡単に作成できるサイトです。
Mockup Photos
では、その手順を確認していきましょう。

Mockup Photosの手順

mockupphotos
「iPhone」や「タブレット」など、探しているデバイス名を検索してみましょう。非常に種類も豊富で、写真自体もおしゃれなものが多いです。
今回は、「iMac」に画像をはめ込みたいと思います。
imac mockup

画像のはめ込み方法ですが、「画像をアップロード」「URLを指定してスクリーンショットをとる」という2種類の方法があります。
例えば、「https://pecopla.net/」というURLを指定してみると、自動で以下のようなモックアップを生成してくれます。

mockup

非常に手軽にできて、完成度も高いので、ぜひ使ってみてください。

モックアップの注意点

ただ綺麗なモックアップを作って終わりでは勿体無いですよね。モックアップを作ったのちに確認すべきポイントをきちんとチェックしておきましょう。

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

全て見る

人気コラム

全て見る

カテゴリー検索

過去の記事

ご質問やご相談などお気軽にお問い合わせください。