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