現役デザイナーが教える！提案書やポートフォリオをレベルアップさせる『デザインモックアップ』の魅力

みなさんは仕事に『デザインモックアップ』を取り入れたことはありますか？デザインモックアップを使用することで、自身のポートフォリオがぐっと華やかにしたり、プレゼンで制作物のビジュアルをより魅力的に見せたりできるようになります。デザインモックアップは、比較的簡単に取り入れることができるのも魅力です。

今回はデザインモックアップを使うメリットや、テンプレートをダウンロードできる具体的なサイトを紹介します。

デザインモックアップで完成した作品の印象をブラッシュアップ

モックアップとは、一般的にはプロダクトデザインにおける実物に近い試作模型を指しますが、今回私が紹介するデザインモックアップはそれと異なります。「自分が制作したデザインが実際にどのような形で使用されるのか」「街中に存在するとどんな印象になるのか」などを想像しやすくするための、ビジュアルイメージを指しています。

これは、今回の記事用に作成したデザインモックアップです。

左はデザインソフトを使用して作成したデータをそのまま書き出したもの、右はそのデザインモックアップです。PC上のプレビュー画面を見て得られる印象と、実際に掲示したものを見て得られる印象は大きく異なります。私が考えるデザインモックアップの魅力は、以下の3点です。

1：デザインの「説得力」がアップする

デザインモックアップは、実際に掲示したイメージを手軽に再現できるツールなのです。まるで本当にそこにあるかのようなイメージは説得力が増します。ポートフォリオは華やかになりますし、プレゼン力も高まります。

2：無料のテンプレートも豊富

モックアップが簡単に作成できるテンプレートが無料でダウンロードできるサイトも増えており、そのバリエーションはどんどん広がっています。画像データさえあれば、そこからさまざまなイメージを展開することができます。もちろん、実際に出力して確認できれば理想的ですが、デジタル上で短時間に作れてしまう手軽さは魅力です。

3：紙媒体以外にも活用可能

デザインモックアップの使用用途は紙媒体に留まりません。例えば、パッケージデザイン、ロゴデザイン、ウェアのデザインなど、立体的なものにも活用できます。ビジュアルイメージの展開をいきなり実物で行うことは難しいですが、デジタル上であればそれが可能になります。

デザインモックアップを使用する時の注意点

デザインモックアップは上手く活用することで、提案段階のデザインをより魅力的に見せることができます。ただし、あくまで「これはモックアップである」と伝えることが大切です。

デジタル上で完結するデザインモックアップは、実際の仕上がりよりも良く見えてしまうことがあります。例えば、布地や段ボールに印刷すると、デザインモックアップで見た状態よりもかなり色がくすんでしまうこともあるのです。デザインモックアップ＝製品の仕上がりイメージと誤解されると、後々トラブルに繋がりかねません。

また、デザイナー自身に最終製品に関する知識（印刷・製造）があった方が良いでしょう。知識があれば、「デザインモックアップ上ではこれくらい綺麗に見えますが、実際にはこれくらいの仕上がりになりますよ」と、あらかじめ説明することが可能だからです。

デザインモックアップのテンプレートやソースがダウンロードできるおすすめサイト５選

デザインモックアップのテンプレートがダウンロードできるおすすめのサイトをいくつか紹介したいと思います。

1：Adobe Stock

最近、Adobe Stockに「テンプレート」というカテゴリができ、PSD形式の多種多様なモックアップをダウンロードすることができるようになりました。Adobe Stockの通常のプランで、ストックフォトと同様の扱いでダウンロードして利用することが可能です。大手サービスだけあって、クオリティが高くバリエーションも豊富です。

※https://stock.adobe.com/jp/templates

2：zippy pixels

素材を販売しているWEBショップですが、モックアップは「FREE」と記載された無料のものが非常に充実していて、無料分だけで事足りてしまうほどです。

※https://zippypixels.com/products/mockups/

3：Pixeden

こちらも素材を販売しているWEBショップ。「Free」と「Premium」に分かれていて、Freeは無料でダウンロード可能です。Premium素材をダウンロードするには、月額およそ10$のメンバーシップに加入する必要があります。

※https://www.pixeden.com/psd-mock-up-templates

４：Mockupworld

さまざまなモックアップのソースを紹介しているサイトです。Mockupworld自体は制作・配布元ではないので、ダウンロードを選択すると配布元のサイトへと遷移します。

※https://www.mockupworld.co/all-mockups/

5：Placeit!

基本的にPhotoshopで加工する必要があるデータです。有料サイトですが、Adobe製品を持っていない方にはPlaceit!は一つの選択肢としてオススメです。画像をアップロードして、ブラウザ上でモックアップを制作し、データとして出力することができます。

※https://placeit.net/c/mockups

いかがでしたか？手軽にテンプレートも入手できますし、仕事の幅も広げてくれるのではないでしょうか？これを機に、ぜひデザインモックアップを活用してみてください。

※本記事は2020年6月1日時点で公開されている情報をもとに執筆しておりますので、サービス内容・価格等は変更されている場合もあります。それぞれのサイトの利用規約・ライセンスを確認し、ご自身の責任において利用してください。

ピンチにも、チャンスにも。ファクタリングサービス
「FREENANCE即日払い」

▼あわせて読みたい！▼