ローディング中

モックアップをうまく使って一歩先の提案を

今クライアントにどのようにしてデザインを伝えていますか?

デザイナーから上がってきた平面の資料だけでは伝わりにくことも多々ありますよね。

「実際に出来上がった時がイメージしにくい」

「どういう仕上がりになるのか分からない」

イメージがうまく伝わらなければ、デザインがいつまでも決まらず時間だけが無駄にすぎてしまいます。

そこで、「モックアップ」を活用することで、仕上がりのイメージが上手く伝わる「モックアップ」についてお話ししていきたいと思います。

モックアップを活用して一歩先の提案を

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

camera-1284459_1280

モックアップとは、工業製品の設計・デザイン段階で試作される、外見を実物そっくりに似せて作られた実物大の模型のこと。ソフトウェアWebサイト、印刷物などのデザインを確認するための試作品のこともモックアップと呼ぶことがある。

引用元:e-word

と、あるように、試作品ですね。

といっても、デザイン案の段階で試作品をガンガン作るなんて余裕はどこもないでしょう。

そこで、便利なのがphotoshopです。

photoshopを使ってモックアップを作れば、イメージも伝えやすいってもんです。

さらに、無料のモックアップ用のテンプレも多く配布されているので、簡単に導入することも可能です。

今回はいくつかテンプレを使って、モックアップを作ってみました。

まずは素材。

まずはAWESOMEのロゴを使った素材をパパパッと用意しました。

モックアップ

さて、こちらを使ってモックアップを作っていきます。

まずはフライヤーにしてみましょう。

blog

blog3

こんな感じの、コート紙で印刷したフライヤー的な感じで、

パパっと作れちゃいます。

さて、フライヤーだとあまりモックアップの利点もでないので、

今度はこんなのを作ってみました。

blog3

そうです、バスストップの広告です。

こういうのは特にphotoshopで作るモックアップだからこそ実現できるものですね。

そして、こんなものも作れちゃいます。

mkp-cups

カフェへの提案にいかがでしょうか。

カップですね。

そして今度はパソコンに差し込んでみましょう。

1

光の反射なども再現してくれるので、かなりリアルに仕上げることができます。

ロゴを使って遊んでみよう

今度は会社ロゴを使ってモックアップを作っていきたいと思います。

まずはTシャツから

t-shirt

イベントTとか作ったらこんな感じになるんでしょうね。

blog4

そして最後にバンです。

WEB制作会社でバンを使うケースって多分ないと思うんですが。

バンです。

社用車がハイエースとかの大型バンになったらそれはそれでインパクトあるんでしょうね。

デザイン案だけではなくモックアップも一緒に

WEBの現場では意外と使われてないモックアップも、

デザイン事務所などでは当たり前のように使われてきています。

デザインに関わるものとして、こういったツールも使いながら、

クライアントに提案をしていってもいいのではないでしょうか?

モックアップを作るのに、10分もかかりません。

その手間をかけるか、かけないからで、効率が変わってくると思えば。

モックアップの大切さがわかるのではないでしょうか?

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.