あなたのお役に立ちたいわんど。

モックアップについて

みなさん、カンプで使用する商品ダミー画像どうしていますか?また企画書などで使用するイメージ画像どうしていますか?
人それぞれだと思いますが、多くの方が無料素材屋さんでとってくると思います。私もそうです!が!
まるでこのためだけに写真で撮りました感のあるもの、もう少しオシャレに見せたいな〜と思った時に思い出してほしい、モックアップについてと実際使ってみたを紹介していこうと思います。

 

モックアップってなんぞ?

モックアップとは、工業製品の設計・デザイン段階で試作される、外見を実物そっくりに似せて作られた実物大の模型のこと。ソフトウェアやWebサイト、印刷物などのデザインを確認するための試作品のこともモックアップと呼ぶことがある。
工業製品のモックアップは製品の外観を確認・評価するために作られるもので、加工の容易な木やプラスチックで作られることが多い。形状やサイズを確認する段階で制作されるものは塗装などは省略されるが、デザインの最終段階で検証を行うものや販売促進用の店頭サンプルとして制作されるものは本物そっくりに塗装や装飾などが行われることもある。
また、製図データなどから製品の外観を3次元コンピュータグラフィックス(3DCG)として作成し、画面上に映し出す手法を「デジタルモックアップ」(DMU:Digital Mock-Up)という。実物では手間のかかる彩色の変更などが容易にできたり、可動部の動きや内部構造などを再現して確認できるといったメリットがある。
IT用語辞典 e-Words

 

実物に近いサンプル品??ということでしょうか…それを使って相手により理解してもらう、イメージを掴んでもらうということですかね…。
わかりやすい例えだと(私がよく見るのは)レスポンシブデザイン対応ですよーと説明するときにデバイスごとにサイトを表示させたりするのがそうですかね…!!
(食品サンプルもですかね…お土産屋さんでよくみる箱と箱の中身とお菓子の中身が一緒にクリアケースに入ってるのも仲間なのでしょうか……)

 

使うとどうなる??

 

いくつか画像を用意しました!以下の画像を何にも考えず見てください。

cowtocoのサイトデザインでボツになった、カテゴリーページと商品詳細ページのデザインカンプです。「a」と「b」両方とも同じデザインレイアウトです。

 


 

cowtocoはどこにいても使えるよ!どの端末でも使えるよ!を紹介するための画像サンプル「a」と「b」です。


 

名刺色違い作りました。並べるとこんな感じになりますよという紹介画像サンプル「a」と「b」です。

それぞれの画像「a」と「b」どちらの方が印象に残りましたか?
どちらも…う〜ん??となるかもしれませんが、「b」の方が印象に残る気がしませんか?
例にあげた画像「a」は実物をほぼ置いてない状態になります。ふんわりざっくり伝える感じです。
「b」はモックアップ素材を活用したものです。そこにあったらこうなるぜ!と伝える感じです。
なんでもそうですが、実物の力って強いと思いませんか?「もしも〜」が見える、偽物だけど目で見て確かめられるって説得力やイメージがしやすくなると私は思います。
モックアップを使うことによってクライアントへのプレゼンテーションやデザインカンプ提出時により理解してもらいやすい、印象に残りやすいものができるということです!

 

一から作るのって大変なんじゃ…

 

今週提出なんだけど!実物に近いものを一から作る時間ない!ってなりますよね。じゃ写真撮って合成すれば……!と思ってもそんな時間もないですよね。いくら時間があっても実物に使い物を作る技術もない私には無理です。

そんな時に役に立つ!モックアップ無料素材です!!

デザイナーは持っておきたい、無料ダウンロードできるモックアップ素材35個まとめ

全部無料!魅力的なパッケージを作成する優良モックアップ素材55個まとめ

この他にも「モックアップ 無料素材」「ポスター モックアップ」「パッケージ モックアップ」などなど検索するとたくさん出てきます。
(海外の素材が多く、有料のもの、クレジット表記必須、商用使用不可もありますので、私のような英語が苦手な方はグーグル先生(翻訳)に助けてもらうのをオススメします……。)

 

使ってみた

 

先ほど紹介した記事の中にあった素材を実際使ってみようと思います。
今回はPSDデータのものを使います。
こちらのPlastic Pouch Packaging MockUp を使います!

さっそくDLします。ダウンロードしたファイルからPSDデータをPhotoshopで開きます。

DLしたページから察してましたがレイヤーを見ると見事に英語ですね!!!!英語苦手な私は拒絶反応を起こしていますが、とてもわかりやす単語で書かれているので苦手な人でも大丈夫です‼︎
「Your design here (double-click on the layer thumbnail)」という名前のレイヤーに自分のデザインを入れれば良いということです。
Your design here (double-click on the layer thumbnail)レイヤーのサムネイル画像をダブルクリックします。

そうすると新たにファイルが開かれます。
こんな感じにパッケージのイラスト文字部分のデザインのみのものが出てくるはず…です。

ここに自分のデザインを入れます!
どっからか持ってきてもいいし自分のデザインを入れても大丈夫です。
今回はお試しなので適当に色を入れてその上から文字を入れるのみをしていこうと思います。

こんな感じで、本当適当に書きました。そして、できたら保存(⌘S)します。

最初に開いていたファイルに戻ります。
(※二回目に開いた方のデータは消さずにそのまま開いた状態にしといてください。)
絵がさっき保存したデザインになっていれば成功です‼︎

位置、色調整したくなったら、また二枚目に開いたファイルに戻り調整→保存で最初のファイルに戻ると最新データが反映されます。簡単!ポチポチっとするだけです。
あの適当に書いたパッとしないものがなんだかオシャレに見える不思議体験……っ。
他のレイヤーはほぼいじらなくて大丈夫です。いじるとしたら背景色をお勧めします〜。

まとめ

伝える相手だけではなく、作り手もイメージがつきやすくなる、創作の役に立つのがモックアップのすごいところだと思います。
カンプや企画書にもってこいなモックアップですが、ちゃんとしたパッケージないけどこんな感じとかTシャツデザインしたけど平面じゃ想像できない、このポスター街中で貼ったらどんな感じになるんだろうなどなど…簡単に試すことができないデザインにも役に立ちますよ。

cowtocoが街中で貼られていたら目立ちそうですね……。
以上モックアップについてでした〜!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

< すべての記事を見る >

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
イベントスペース「fuigo」
CS-Cartの情報ポータル「STOCK」