【ポートフォリオ】モックアップの使い方

先日、就活準備の記事で「おすすめのモックアップ」ついて紹介しました。実際にポートフォリオのレイアウトでありがちなデザインを参考に、モックアップを使用した例を挙げて見ましょう。

ポートフォリオにモックアップは必要?なのか

必要か、と言われたらそれぞれだと思います。実際に、モックアップ自体を制作する学生の方も多くいます。ただ「そこに時間がかけられない」もしくは「作ってみたもののクオリティが心配」という時に有効です。

また、実際に作ったものをポートフォリオ上で見せるために撮影をする場合があります。実はその撮影自体のクオリティに問題がある場合もありますね。
実際の仕事でモックアップは「ワイヤー作成後のビジュアルを確認するため」や「実際の機能やプロトタイプ」としての位置づけなど、様々です。

ここではあくまでも、ポートフォリオの表現の幅を広げるための位置づけとして取り入れてみるのも良いのではないでしょうか?

実際に使ってみた

ではここで、参考例を「Webの画面デザイン」を使って作ってみました。
学生のみなさんのポートフォリオにはありがちなレイアウトです。画面のデザインをきれいに平面構成でまとめています。

ここでポイントなのは、「ある程度UIを考えてWebデザインをしている」場合はこういった平面構成でしっかり見せるページがあるのは良いでしょう。実際に評価のポイントにもなりますし、面接でその部分をアピールする事もできますね。

ただ、あまり深くそこまで考えずにWebの画面デザインを作ってしまったり「他のツールのバリエーションとしてWebも用意した」という場合が要注意です。
見る側は雰囲気だけでなく、実際のUIについても現職ですから気になりますし、ざっくり作っているものほど相手には目に止まってしまうのです。

そんな時こそ、モックアップが必要だと思っています。実際のプロではないので、細かいところまでわからないのは当たり前です。
ですので、そこを一つの作品の一部として見せるために、モックアップを使用してみるのも一つの手ではないでしょうか?

実際にレスポンシブ対応になると、デザインは様々なデバイスに分けられます。モックアップに入れてみると、自分の作ったデザインが「実際にうまく作れているか?」などの確認もできるがポイントですね。

合わせて読みたい

【ポートフォリオ】モックアップおすすめ素材
【ポートフォリオ】モックアップおすすめ素材2
【ポートフォリオ】制作ソフトおすすめBest3!

美大芸大就活ナビ的「モックアップの使い方」はいかがでしたでしょうか?ぜひ参考にしてみてください。