バナートレース

OVERVIEW

SHE Likes MULTI CREATOR PROJECTの課題で、バナートレースに取り組みました。見本のバナーをillustratorとphotoshopを使って模写し、バナーのデザイン(制作目的・配色・情報設計)を分析しました。

■目次

1. トレースしたバナー

2. バナーの分析

3. 工夫したところ

4. 制作を通じて学んだこと

5. その他のバナートレース作例

6. 今後の取り組みについて

1. トレースしたバナー

メルペイ×TSUTAYAの50%還元キャンペーンバナーをトレースしました。

2. バナーの分析

配色・視線誘導の方法・レイアウト・フォントを分析し、まとめました。

3. 工夫したところ

3-1. ペンツールを使った細かい模写

illustratorのペンツールを使って、「メルペイフィーバー中!!!」の文字をトレースし、文字を忠実に再現しました。「最大」の白いタグの部分も、ペンツールを使い、タグ紐を再現しました。

3-2.視線誘導の観点から情報設計を分析

分析の際には、このバナーを見る人の視線の動きを意識しました。左上→右上→左下→右下の順番に「Z型」に視線が動くように設計されていることに気づき、このバナーの制作目的とゴールについて考察しました。

4. 制作を通じて学んだこと

4-1. バナーの情報設計の方法

インパクトのある数字やキャッチなーコピーで見る人の目を引いた後、どのようなレイアウトにすればゴールに導くことができるのかについて学びました。

4-2. 文字の強弱やフォント選びの重要性

DINというフォントを知り、視認性があるフォントの重要性を学びました。また、情報の優先度をつけて、フォントに強弱をつける方法を学びました。

4-3. 配色デザイン

スクロールの速度が速いTwitterで目を止めてもらうための、インパクトある配色について学びました。また3色を使ってまとまりのあるデザインを作れることを学びました。

5. その他のバナートレース作例

同時期に他にも5つのバナートレースを行いました。こちらのブログ記事にまとめております。

6. 今後の取り組みについて

自分がSNSを使っている中で、目に止まったバナー広告をストックし、引き続きバナーのトレースと分析をやっていきたいと思います。