モックアップのやり方を詳しく解説します
2021.06.18
実際の仕上がりイメージをクライアントと共有する手段として非常に有効なモックアップ。Webサイトやアプリはもちろん、名刺やチラシなどの紙媒体でもモックアップを使用することをおすすめします。
モックアップを作ると聞くと、ハードルが高いように聞こえるかもしれませんが、意外と簡単にできるので、本記事を参考にWebデザイナーの方はぜひ作ってみてください。
モックアップとは
モックアップとは、Webサイトやアプリなどのデザインを、スマホやPCの画面にはめ込み、実際の仕上がりイメージを確認することができる、いわば見本品のようなものです。
リリースする前に、クライアントとモックアップを共有しておくことで、認識のズレが無くなったり、見えていなかった問題点が見つかったり、議論が活発になったりと様々な点で有効な手段です。
そのため、デザイナーの方はWeb・グラフィック問わず、モックアップを作れるようにしておくことをおすすめします。
モックアップの作り方 Photoshopの場合
Webデザイナーであれば、Photoshopを持っている、使用しているという方も多いのではないでしょうか。Photoshopを使えば、綺麗なモックアップを簡単に作ることができますよ。
Photoshopでのモックアップ作成手順
では、まずはPhotoshopを用いたモックアップのやり方をご紹介していきたいと思います。
素材を準備する
まずは以下を準備しましょう。
- モックアップ素材
- モックアップにはめ込むキャプチャ
モックアップ素材については「スマホ モックアップ」「PC モックアップ」などと検索することでフリー素材を見つけられます。
今回は以下の画像を使用していきたいと思います。
Photoshopでの操作
不要なデバイスがあれば、非表示にしましょう。今回は、デスクトップとスマホのみを使用したいので、他は非常時にします。
iPhone、iMacのレイヤーグループを開き、「YOUR SCREEN HERE」と書かれたレイヤーをダブルクリックします。
新たなタブが開くので、そこにキャプチャをはめ込んでいきます(画像はiMacの画面のレイヤー)。Photoshopメニューのファイルから埋め込みを配置でキャプチャを選択しましょう。
iMac、iphoneそれぞれの画面にキャプチャを配置したら、保存して元のタブに戻ります。
これで、imacとiphoneのモックアップを作ることができました。
モックアップの作り方 Mockup Photosの場合
続いて、「Mockup Photos」を使用した、モックアップの作り方をご紹介します。
「Mockup Photos」とは、オンライン上で画像をはめ込むことでモックアップを簡単に作成できるサイトです。
Mockup Photos
では、その手順を確認していきましょう。
Mockup Photosの手順
「iPhone」や「タブレット」など、探しているデバイス名を検索してみましょう。非常に種類も豊富で、写真自体もおしゃれなものが多いです。
今回は、「iMac」に画像をはめ込みたいと思います。
画像のはめ込み方法ですが、「画像をアップロード」「URLを指定してスクリーンショットをとる」という2種類の方法があります。
例えば、「https://pecopla.net/」というURLを指定してみると、自動で以下のようなモックアップを生成してくれます。
非常に手軽にできて、完成度も高いので、ぜひ使ってみてください。
モックアップの注意点
ただ綺麗なモックアップを作って終わりでは勿体無いですよね。モックアップを作ったのちに確認すべきポイントをきちんとチェックしておきましょう。
- 画面上でのレイアウトで不自然な点はないか
- 配色はおかしくないか
- クライアントの指示に合った内容か
こういった部分を確認し、クライアントともイメージを共有することで、後々の修正リスクを減らすことができます。
まとめ
今回は、モックアップの作り方をご紹介いたしました。一見難しそうですが、意外と簡単にできると思って頂けたのではないでしょうか。
クライアントとのイメージの共有にも、ご自身のポートフォリオの見せ方としても非常に有効なので、ぜひ活用してくださいね。
関連
Webサイト制作
Webサイト制作
SEO外部対策SEO対策
