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

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

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

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

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

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

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

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

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

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

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

引用元:e-word

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

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

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

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

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

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

まずは素材。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カップですね。

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

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

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

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

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

まずはTシャツから

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

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

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

そして最後にバンです。

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

バンです。

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

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

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

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

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

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

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

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

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →