⑦【モックアップ編】ペット用オーガニックフードのバナーをデザインしよう

完成したバナーをモックアップに載せて、実際の掲載イメージで見え方を確認します。提案力・ポートフォリオの説得力がぐっと上がります。

谷町くん

完成したから、画像をそのまま送っちゃえばいいですよね?

トリペン先生

実際の掲載イメージ(モックアップ)にはめて見せると説得力が段違い!仕上がりを想像できないクライアントも多いんです。

このステップでやること

① 実際の広告枠(SNSタイムラインやサイトの配置)に近いモックアップに配置。
② 実寸・周囲の情報の中でちゃんと目立つか確認。
③ 見え方に問題があれば微調整。

ポイント:「単体で綺麗」より「掲載環境で伝わる」が正解。ポートフォリオ用にも1枚作っておこう。

記事の内容

なぜモックアップが効くのか

バナー単体の画像を見せられても、クライアントは「実際にサイトに載ったときの姿」を想像できません。実際の掲載環境にはめた画像(モックアップ)を添えると、仕上がりが一瞬で伝わり、提案の説得力が大きく上がります。ポートフォリオでも、単体画像だけの人とモックアップ付きの人では印象がまるで違います。

モックアップの作り方

作り方は2通り

テンプレートを使う:「バナー モックアップ 無料」「advertising mockup free」などで検索し、Webサイトやスマホ画面の広告枠にはめ込めるpsdテンプレートを使う(商用利用の確認は素材探しと同じ)
自作する:ニュースサイトやブログ風の画面を簡単に組んで、記事の横やフィードの間に300×250を配置する。スマホのSNSフィード風も効果的

チェックの観点

モックアップに置いたら、周囲に記事や他のコンテンツがある状態で、自分のバナーに目が行くかを確認します。実際の広告は、コンテンツの洪水の中で戦います。ここで埋もれて見えるなら、キャッチのコントラストか主役の大きさが足りないサインです。気になった点は本データに戻って微調整し、モックアップも更新します。

このステップの完成チェック

①掲載イメージのモックアップが1枚以上できている
②周囲のコンテンツの中でもバナーが目に入る
③ポートフォリオ用に保存した

トリペン先生

「単体で綺麗」より「現場で伝わる」。モックアップはそれを確かめる実務の知恵だよ〜!

記事の内容