【実践課題】バナートレース
OVERVIEW
SHElikes MULTI CREATOR COURSE Designer の1つめの課題で、バナートレースに取り組みました。デザインからターゲットと目的、配色について分析しそれらをまとめた資料を作成しました。
制作期間:7日間
制作に使用したツール:Photoshop
目次
1.トレースしたバナー・ターゲットと目的
2.バナーの分析内容
3.制作をする上で工夫した点
4.制作を通して学んだこと
1.トレースしたバナー・ターゲットと目的
デザインからターゲットと目的を考察しました。
2.バナーの分析内容
配色と情報設計・ビジュアルデザインについて分析し、資料にまとめました。
3.制作をする上で工夫した点
- 背景
背景のあしらいは見本のバナーを上からペンツールでなぞり、一から自分で制作しました。ドット柄はパターンオーバーレイの比率を調整、カラーオーバーレイで色味の調整をすることで、見本のバナーに近づくように工夫しました。 - 商品画像
シェイクとイチゴの写真はレイヤーマスクを使用して切り抜き、ブラシツールで影を付けて見本のバナーに近づくように工夫しました。 - あしらい
『数量限定』と書かれているイチゴのあしらいは、ペンツールを使用して見本のバナーを上からなぞり、一から自分で制作しました。少々難しかったですが、見本のものとほぼ同じように制作することが出来ました。
- 分析内容をまとめた資料について
バナーに使われている色と同じ色を使用して統一感を感じられるようにしました。
見やすいように全体的にシンプルなデザインにして、かつ、バナーデザインの世界観を壊さないように工夫しました。
4.制作を通して学んだこと
- 一目で内容が分かる情報設計をする
商品画像が一番最初に目に入るよう大きくレイアウトすることで、ターゲットの購買意欲をかき立てるデザインになっていると感じました。また、商品画像のすぐ右側に詳細情報が書かれていることで、大きな視線移動なく伝わりやすくなっています。「ターゲットに1番伝えたい情報は何か?」ということを考えながら制作をすることの大切さを学びました。 - ユーザーストーリーに寄り添ったビジュアルデザインを考えることの大切さ
今回トレースしたバナーは、赤とピンクがメインの配色でシェイクやイチゴを連想させるため、商品画像と統一感のあるデザインになっています。また、シェイクの周りにイチゴの画像が配置されていることで、どんな商品なのかイメージがしやすくフレッシュさが伝わるため、更にターゲットの購買意欲が高まる工夫がされていると感じました。これらを踏まえ、今後の自身の制作でもユーザーストーリーに寄り添ったデザインを心がけていきたいと思いました。